replaced classes

Author: silviuaavram

docs/data/material/customization/theme-components/GlobalCss.js

@@ -1,21 +1,23 @@
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 
 const theme = createTheme({
   components: {
     MuiButton: {
       // Style sheet name ⚛️
       styleOverrides: {
         // Name of the rule
-        textPrimary: {
-          // Some CSS
-          background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-          borderRadius: 3,
-          border: 0,
-          color: 'white',
-          height: 48,
-          padding: '0 30px',
-          boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+        root: {
+          [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
+            // Some CSS
+            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+            borderRadius: 3,
+            border: 0,
+            color: 'white',
+            height: 48,
+            padding: '0 30px',
+            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+          },
         },
       },
     },

docs/data/material/customization/theme-components/GlobalCss.tsx

@@ -1,21 +1,23 @@
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 
 const theme = createTheme({
   components: {
     MuiButton: {
       // Style sheet name ⚛️
       styleOverrides: {
         // Name of the rule
-        textPrimary: {
-          // Some CSS
-          background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
-          borderRadius: 3,
-          border: 0,
-          color: 'white',
-          height: 48,
-          padding: '0 30px',
-          boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+        root: {
+          [`&.${buttonClasses.text}.${buttonClasses.colorPrimary}`]: {
+            // Some CSS
+            background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+            borderRadius: 3,
+            border: 0,
+            color: 'white',
+            height: 48,
+            padding: '0 30px',
+            boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
+          },
         },
       },
     },

docs/src/components/action/MaterialVsCustomToggle.tsx

@@ -31,7 +31,7 @@ export default function MaterialVsCustomToggle({
           padding: '1px 8px',
           fontSize: theme.typography.pxToRem(12),
         },
-        '& .MuiButton-outlinedPrimary': {
+        [`& .${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: {
           backgroundColor: alpha(theme.palette.primary[900], 0.5),
         },
       })}

docs/src/components/home/MaterialDesignComponents.tsx

@@ -10,7 +10,7 @@ import {
 import { capitalize } from '@mui/material/utils';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import Tabs from '@mui/material/Tabs';
 import Menu from '@mui/material/Menu';
@@ -228,6 +228,15 @@ export function buildTheme(): ThemeOptions {
             fontSize: '0.875rem',
             lineHeight: 24 / 16,
             textTransform: 'none',
+            [`&.${buttonClasses.sizeSmall} > .${buttonClasses.icon}`]: {
+              fontSize: '0.875rem',
+            },
+            [`&.${buttonClasses.sizeMedium} > .${buttonClasses.icon}`]: {
+              fontSize: '0.875rem',
+            },
+            [`&.${buttonClasses.sizeLarge} > .${buttonClasses.icon}`]: {
+              fontSize: '1rem',
+            },
           },
           sizeSmall: ({ theme }) => ({
             padding: theme.spacing(0.5, 1),
@@ -264,21 +273,6 @@ export function buildTheme(): ThemeOptions {
               borderColor: alpha(theme.palette.primary[300], 0.5),
             }),
           }),
-          iconSizeSmall: {
-            '& > *:nth-of-type(1)': {
-              fontSize: '0.875rem',
-            },
-          },
-          iconSizeMedium: {
-            '& > *:nth-of-type(1)': {
-              fontSize: '0.875rem',
-            },
-          },
-          iconSizeLarge: {
-            '& > *:nth-of-type(1)': {
-              fontSize: '1rem',
-            },
-          },
         },
       },
       MuiAlert: {