[Theme] Rename theme keys to defaultProps and styleOverrides (#22347)

mui · Aug 28, 2020 · 1365cd3 · 1365cd3
1 parent 77f5889
commit 1365cd3
Show file tree

Hide file tree

Showing 46 changed files with 2,338 additions and 1,907 deletions.
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -38,30 +38,30 @@ const themeInitialOptions = {
 const highDensity = {
   components: {
     MuiButton: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiFilledInput: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFormControl: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFormHelperText: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiIconButton: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
-      overrides: {
+      styleOverrides: {
         sizeSmall: {
           // minimal touch target hit spacing
           marginLeft: 4,
@@ -71,42 +71,42 @@ const highDensity = {
       },
     },
     MuiInputBase: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiInputLabel: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiListItem: {
-      props: {
+      defaultProps: {
         dense: true,
       },
     },
     MuiOutlinedInput: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFab: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiTable: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiTextField: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiToolbar: {
-      props: {
+      defaultProps: {
         variant: 'dense',
       },
     },

diff --git a/docs/src/pages/components/about-the-lab/about-the-lab.md b/docs/src/pages/components/about-the-lab/about-the-lab.md
@@ -48,7 +48,7 @@ import '@material-ui/lab/themeAugmentation';
 const theme = createMuiTheme({
   components: {
     MuiTimeline: {
-      overrides: {
+      styleOverrides: {
         root: {
           backgroundColor: 'red',
         },

diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md
@@ -84,7 +84,7 @@ It’s important to realize that the style of a typography component is independ
 const theme = createMuiTheme({
   components: {
     MuiTypography: {
-      props: {
+      defaultProps: {
         variantMapping: {
           h1: 'h2',
           h2: 'h2',

diff --git a/docs/src/pages/components/use-media-query/ServerSide.js b/docs/src/pages/components/use-media-query/ServerSide.js
@@ -23,7 +23,7 @@ export default function ServerSide() {
         components: {
           MuiUseMediaQuery: {
             // Change the default options of useMediaQuery
-            props: { ssrMatchMedia },
+            defaultProps: { ssrMatchMedia },
           },
         },
       }}

diff --git a/docs/src/pages/components/use-media-query/ServerSide.tsx b/docs/src/pages/components/use-media-query/ServerSide.tsx
@@ -23,7 +23,7 @@ export default function ServerSide() {
         components: {
           MuiUseMediaQuery: {
             // Change the default options of useMediaQuery
-            props: { ssrMatchMedia },
+            defaultProps: { ssrMatchMedia },
           },
         },
       }}

diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md
@@ -290,7 +290,7 @@ const theme = createMuiTheme({
   components: {
     // withWidth component ⚛️
     MuiWithWidth: {
-      props: {
+      defaultProps: {
         // Initial width prop
         initialWidth: 'lg', // Breakpoint being globally set 🌎!
       },

diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.js b/docs/src/pages/customization/components/GlobalThemeOverride.js
@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 const theme = createMuiTheme({
   components: {
     MuiButton: {
-      overrides: {
+      styleOverrides: {
         root: {
           fontSize: '1rem',
         },

diff --git a/docs/src/pages/customization/components/GlobalThemeOverride.tsx b/docs/src/pages/customization/components/GlobalThemeOverride.tsx
@@ -5,7 +5,7 @@ import Button from '@material-ui/core/Button';
 const theme = createMuiTheme({
   components: {
     MuiButton: {
-      overrides: {
+      styleOverrides: {
         root: {
           fontSize: '1rem',
         },

diff --git a/docs/src/pages/customization/components/GlobalThemeVariants.js b/docs/src/pages/customization/components/GlobalThemeVariants.js
@@ -22,28 +22,28 @@ const theme = createMuiTheme({
       variants: [
         {
           props: { variant: 'dashed' },
-          styles: {
+          style: {
             textTransform: 'none',
             border: `2px dashed ${defaultTheme.palette.primary.main}`,
             color: defaultTheme.palette.primary.main,
           },
         },
         {
           props: { variant: 'dashed', color: 'secondary' },
-          styles: {
+          style: {
             border: `2px dashed ${defaultTheme.palette.secondary.main}`,
             color: defaultTheme.palette.secondary.main,
           },
         },
         {
           props: { variant: 'dashed', size: 'large' },
-          styles: {
+          style: {
             borderWidth: 4,
           },
         },
         {
           props: { variant: 'dashed', color: 'secondary', size: 'large' },
-          styles: {
+          style: {
             fontSize: 18,
           },
         },

diff --git a/docs/src/pages/customization/components/GlobalThemeVariants.tsx b/docs/src/pages/customization/components/GlobalThemeVariants.tsx
@@ -29,28 +29,28 @@ const theme = createMuiTheme({
       variants: [
         {
           props: { variant: 'dashed' },
-          styles: {
+          style: {
             textTransform: 'none',
             border: `2px dashed ${defaultTheme.palette.primary.main}`,
             color: defaultTheme.palette.primary.main,
           },
         },
         {
           props: { variant: 'dashed', color: 'secondary' },
-          styles: {
+          style: {
             border: `2px dashed ${defaultTheme.palette.secondary.main}`,
             color: defaultTheme.palette.secondary.main,
           },
         },
         {
           props: { variant: 'dashed', size: 'large' },
-          styles: {
+          style: {
             borderWidth: 4,
           },
         },
         {
           props: { variant: 'dashed', color: 'secondary', size: 'large' },
-          styles: {
+          style: {
             fontSize: 18,
           },
         },

diff --git a/docs/src/pages/customization/components/components.md b/docs/src/pages/customization/components/components.md
@@ -309,7 +309,7 @@ Learn more about it in the [themes section](/customization/globals/#css) of the
 const theme = createMuiTheme({
   components: {
     MuiButton: {
-      overrides: {
+      styleOverrides: {
         root: {
           fontSize: '1rem',
         },
@@ -323,7 +323,7 @@ const theme = createMuiTheme({
 
 ### Adding new component variants
 
-You can take advantage of the `variants` key in the `theme` to add new variants to Material-UI components. These new variants, can specify which styles the component should have, if specific props are defined together.
+You can take advantage of the `variants` key in the `theme`'s components section to add new variants to Material-UI components. These new variants, can specify which styles the component should have, if specific props are defined together.
 
 The definitions are specified in an array, under the component's name. For every one of them a class is added in the head. The order is **important**, so make sure that the styles that should win will be specified lastly.
 
@@ -334,14 +334,14 @@ const theme = createMuiTheme({
       variants: [
         {
           props: { variant: 'dashed' },
-          styles: {
+          style: {
             textTransform: 'none',
             border: `2px dashed grey${blue[500]}`,
           },
         },
         {
           props: { variant: 'dashed', color: 'secondary' },
-          styles: {
+          style: {
             border: `4px dashed ${red[500]}`,
           },
         },

diff --git a/docs/src/pages/customization/density/density.md b/docs/src/pages/customization/density/density.md
@@ -48,30 +48,30 @@ The theme is configured with the following options:
 const theme = createMuiTheme({
   components: {
     MuiButton: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiFilledInput: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFormControl: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFormHelperText: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiIconButton: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
-      overrides: {
+      styleOverrides: {
         sizeSmall: {
           // Adjust spacing to reach minimal touch target hitbox
           marginLeft: 4,
@@ -81,42 +81,42 @@ const theme = createMuiTheme({
       },
     },
     MuiInputBase: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiInputLabel: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiListItem: {
-      props: {
+      defaultProps: {
         dense: true,
       },
     },
     MuiOutlinedInput: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiFab: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiTable: {
-      props: {
+      defaultProps: {
         size: 'small',
       },
     },
     MuiTextField: {
-      props: {
+      defaultProps: {
         margin: 'dense',
       },
     },
     MuiToolbar: {
-      props: {
+      defaultProps: {
         variant: 'dense',
       },
     },

diff --git a/docs/src/pages/customization/globals/DefaultProps.js b/docs/src/pages/customization/globals/DefaultProps.js
@@ -6,7 +6,7 @@ const theme = createMuiTheme({
   components: {
     // Name of the component ⚛️
     MuiButtonBase: {
-      props: {
+      defaultProps: {
         // The default props to change
         disableRipple: true, // No more ripple, on the whole application 💣!
       },

diff --git a/docs/src/pages/customization/globals/DefaultProps.tsx b/docs/src/pages/customization/globals/DefaultProps.tsx
@@ -6,7 +6,7 @@ const theme = createMuiTheme({
   components: {
     // Name of the component ⚛️
     MuiButtonBase: {
-      props: {
+      defaultProps: {
         // The default props to change
         disableRipple: true, // No more ripple, on the whole application 💣!
       },

diff --git a/docs/src/pages/customization/globals/GlobalCss.js b/docs/src/pages/customization/globals/GlobalCss.js
@@ -6,7 +6,7 @@ const theme = createMuiTheme({
   components: {
     MuiButton: {
       // Style sheet name ⚛️
-      overrides: {
+      styleOverrides: {
         // Name of the rule
         textPrimary: {
           // Some CSS

diff --git a/docs/src/pages/customization/globals/GlobalCss.tsx b/docs/src/pages/customization/globals/GlobalCss.tsx
@@ -6,7 +6,7 @@ const theme = createMuiTheme({
   components: {
     MuiButton: {
       // Style sheet name ⚛️
-      overrides: {
+      styleOverrides: {
         // Name of the rule
         textPrimary: {
           // Some CSS

diff --git a/docs/src/pages/customization/globals/globals.md b/docs/src/pages/customization/globals/globals.md
@@ -64,7 +64,7 @@ return (
 ## Default props
 
 You can change the default props of all the Material-UI components.
-A `props` key is exposed in the `theme` for this use case.
+A `deafaultProps` key is exposed in the `theme`'s components key for this use case.
 
 To override lab components styles with TypeScript, check [this documentation](/components/about-the-lab/#typescript).
 
@@ -73,7 +73,7 @@ const theme = createMuiTheme({
   components: {
     // Name of the component ⚛️
     MuiButtonBase: {
-      props: {
+      defaultProps: {
         // The default props to change
         disableRipple: true, // No more ripple, on the whole application 💣!
       },