[core] Normalize usage of pseudo classes selectors

packages/material-ui/src/Autocomplete/Autocomplete.js

@@ -114,7 +114,7 @@ const AutocompleteRoot = experimentalStyled(
   },
 )(({ styleProps }) => ({
   /* Styles applied to the root element. */
-  [`&.Mui-focused .${autocompleteClasses.clearIndicator}`]: {
+  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
     visibility: 'visible',
   },
   /* Avoid double tap issue on iOS */
@@ -351,7 +351,7 @@ const AutocompleteListbox = experimentalStyled(
       opacity: theme.palette.action.disabledOpacity,
       pointerEvents: 'none',
     },
-    '&.Mui-focusVisible': {
+    [`&.${autocompleteClasses.focusVisible}`]: {
       backgroundColor: theme.palette.action.focus,
     },
     '&[aria-selected="true"]': {
@@ -366,7 +366,7 @@ const AutocompleteListbox = experimentalStyled(
           backgroundColor: theme.palette.action.selected,
         },
       },
-      '&.Mui-focusVisible': {
+      [`&.${autocompleteClasses.focusVisible}`]: {
         backgroundColor: alpha(
           theme.palette.primary.main,
           theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,

packages/material-ui/src/Autocomplete/autocompleteClasses.js

@@ -8,6 +8,7 @@ const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', [
   'root',
   'fullWidth',
   'focused',
+  'focusVisible',
   'tag',
   'tagSizeSmall',
   'tagSizeMedium',

packages/material-ui/src/Button/Button.js

@@ -154,12 +154,12 @@ const ButtonRoot = experimentalStyled(
         boxShadow: theme.shadows[8],
       }),
     },
-    '&.Mui-focusVisible': {
+    [`&.${buttonClasses.focusVisible}`]: {
       ...(styleProps.variant === 'contained' && {
         boxShadow: theme.shadows[6],
       }),
     },
-    '&.Mui-disabled': {
+    [`&.${buttonClasses.disabled}`]: {
       color: theme.palette.action.disabled,
       ...(styleProps.variant === 'outlined' && {
         border: `1px solid ${theme.palette.action.disabledBackground}`,
@@ -246,13 +246,13 @@ const ButtonRoot = experimentalStyled(
       '&:hover': {
         boxShadow: 'none',
       },
-      '&.Mui-focusVisible': {
+      [`&.${buttonClasses.focusVisible}`]: {
         boxShadow: 'none',
       },
       '&:active': {
         boxShadow: 'none',
       },
-      '&.Mui-disabled': {
+      [`&.${buttonClasses.disabled}`]: {
         boxShadow: 'none',
       },
     },

packages/material-ui/src/ButtonBase/ButtonBase.js

@@ -9,7 +9,7 @@ import useForkRef from '../utils/useForkRef';
 import useEventCallback from '../utils/useEventCallback';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import TouchRipple from './TouchRipple';
-import { getButtonBaseUtilityClass } from './buttonBaseClasses';
+import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses';
 
 const overridesResolver = (props, styles) => styles.root || {};
 
@@ -58,7 +58,7 @@ export const ButtonBaseRoot = experimentalStyled(
   '&::-moz-focus-inner': {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
-  '&.Mui-disabled': {
+  [`&.${buttonBaseClasses.disabled}`]: {
     pointerEvents: 'none', // Disable link interactions
     cursor: 'default',
   },

packages/material-ui/src/ButtonGroup/ButtonGroup.js

@@ -142,14 +142,14 @@ const ButtonGroupRoot = experimentalStyled(
       ...(styleProps.variant === 'contained' &&
         styleProps.orientation === 'horizontal' && {
           borderRight: `1px solid ${theme.palette.grey[400]}`,
-          '&.Mui-disabled': {
+          [`&.${buttonGroupClasses.disabled}`]: {
             borderRight: `1px solid ${theme.palette.action.disabled}`,
           },
         }),
       ...(styleProps.variant === 'contained' &&
         styleProps.orientation === 'vertical' && {
           borderBottom: `1px solid ${theme.palette.grey[400]}`,
-          '&.Mui-disabled': {
+          [`&.${buttonGroupClasses.disabled}`]: {
             borderBottom: `1px solid ${theme.palette.action.disabled}`,
           },
         }),

packages/material-ui/src/CardActionArea/CardActionArea.js

@@ -47,7 +47,7 @@ const CardActionAreaRoot = experimentalStyled(
       opacity: 0,
     },
   },
-  [`&.Mui-focusVisible .${cardActionAreaClasses.focusHighlight}`]: {
+  [`&.${cardActionAreaClasses.focusVisible} .${cardActionAreaClasses.focusHighlight}`]: {
     opacity: theme.palette.action.focusOpacity,
   },
 }));

packages/material-ui/src/Checkbox/Checkbox.js

@@ -52,7 +52,7 @@ const CheckboxRoot = experimentalStyled(
   color: theme.palette.text.secondary,
   /* Styles applied to the root element unless `color="default"`. */
   ...(styleProps.color !== 'default' && {
-    [`&.Mui-checked, &.${checkboxClasses.indeterminate}`]: {
+    [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
       color: theme.palette[styleProps.color].main,
       '&:hover': {
         backgroundColor: alpha(
@@ -65,7 +65,7 @@ const CheckboxRoot = experimentalStyled(
         },
       },
     },
-    '&.Mui-disabled': {
+    [`&.${checkboxClasses.disabled}`]: {
       color: theme.palette.action.disabled,
     },
   }),

packages/material-ui/src/Chip/Chip.js

@@ -116,7 +116,7 @@ const ChipRoot = experimentalStyled(
       padding: 0, // Remove `button` padding
       verticalAlign: 'middle',
       boxSizing: 'border-box',
-      '&.Mui-disabled': {
+      [`&.${chipClasses.disabled}`]: {
         opacity: theme.palette.action.disabledOpacity,
         pointerEvents: 'none',
       },
@@ -194,7 +194,7 @@ const ChipRoot = experimentalStyled(
       }),
       /* Styles applied to the root element if `onDelete` is defined. */
       ...(styleProps.onDelete && {
-        '&.Mui-focusVisible': {
+        [`&.${chipClasses.focusVisible}`]: {
           backgroundColor: alpha(
             theme.palette.action.selected,
             theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
@@ -204,7 +204,7 @@ const ChipRoot = experimentalStyled(
       /* Styles applied to the root element if `onDelete` and not `color="default"` is defined. */
       ...(styleProps.onDelete &&
         styleProps.color !== 'default' && {
-          '&.Mui-focusVisible': {
+          [`&.${chipClasses.focusVisible}`]: {
             backgroundColor: theme.palette[styleProps.color].dark,
           },
         }),
@@ -222,7 +222,7 @@ const ChipRoot = experimentalStyled(
           theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
         ),
       },
-      '&.Mui-focusVisible': {
+      [`&.${chipClasses.focusVisible}`]: {
         backgroundColor: alpha(
           theme.palette.action.selected,
           theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
@@ -235,7 +235,7 @@ const ChipRoot = experimentalStyled(
     /* Styles applied to the root element if `onClick` and not `color="default"` is defined or `clickable={true}`. */
     ...(styleProps.clickable &&
       styleProps.color !== 'default' && {
-        '&:hover, &.Mui-focusVisible': {
+        [`&:hover, &.${chipClasses.focusVisible}`]: {
           backgroundColor: theme.palette[styleProps.color].dark,
         },
       }),
@@ -250,7 +250,7 @@ const ChipRoot = experimentalStyled(
       [`&.${chipClasses.clickable}:hover`]: {
         backgroundColor: theme.palette.action.hover,
       },
-      '&.Mui-focusVisible': {
+      [`&.${chipClasses.focusVisible}`]: {
         backgroundColor: theme.palette.action.focus,
       },
       [`& .${chipClasses.avatar}`]: {
@@ -283,7 +283,7 @@ const ChipRoot = experimentalStyled(
             theme.palette.action.hoverOpacity,
           ),
         },
-        '&.Mui-focusVisible': {
+        [`&.${chipClasses.focusVisible}`]: {
           backgroundColor: alpha(
             theme.palette[styleProps.color].main,
             theme.palette.action.focusOpacity,

packages/material-ui/src/Fab/Fab.js

@@ -78,10 +78,10 @@ const FabRoot = experimentalStyled(
       },
       textDecoration: 'none',
     },
-    '&.Mui-focusVisible': {
+    [`&.${fabClasses.focusVisible}`]: {
       boxShadow: theme.shadows[6],
     },
-    '&.Mui-disabled': {
+    [`&.${fabClasses.disabled}`]: {
       color: theme.palette.action.disabled,
       boxShadow: theme.shadows[0],
       backgroundColor: theme.palette.action.disabledBackground,

packages/material-ui/src/FilledInput/FilledInput.js

@@ -5,7 +5,7 @@ import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled
 import InputBase from '../InputBase';
 import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
 import useThemeProps from '../styles/useThemeProps';
-import { getFilledInputUtilityClass } from './filledInputClasses';
+import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
 import {
   overridesResolver as inputBaseOverridesResolver,
   InputBaseRoot,
@@ -55,10 +55,10 @@ const FilledInputRoot = experimentalStyled(
         backgroundColor,
       },
     },
-    '&.Mui-focused': {
+    [`&.${filledInputClasses.focused}`]: {
       backgroundColor,
     },
-    '&.Mui-disabled': {
+    [`&.${filledInputClasses.disabled}`]: {
       backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)',
     },
     ...(!styleProps.disableUnderline && {
@@ -77,10 +77,10 @@ const FilledInputRoot = experimentalStyled(
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&.Mui-focused:after': {
+      [`&.${filledInputClasses.focused}:after`]: {
         transform: 'scaleX(1)',
       },
-      '&.Mui-error:after': {
+      [`&.${filledInputClasses.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
         transform: 'scaleX(1)', // error is always underlined in red
       },
@@ -97,10 +97,10 @@ const FilledInputRoot = experimentalStyled(
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&:hover:not(.Mui-disabled):before': {
+      [`&:hover:not(.${filledInputClasses.disabled}):before`]: {
         borderBottom: `1px solid ${theme.palette.text.primary}`,
       },
-      '&.Mui-disabled:before': {
+      [`&.${filledInputClasses.disabled}:before`]: {
         borderBottomStyle: 'dotted',
       },
     }),

packages/material-ui/src/FilledInput/filledInputClasses.js

@@ -4,6 +4,13 @@ export function getFilledInputUtilityClass(slot) {
   return generateUtilityClass('MuiFilledInput', slot);
 }
 
-const filledInputClasses = generateUtilityClasses('MuiFilledInput', ['root', 'underline', 'input']);
+const filledInputClasses = generateUtilityClasses('MuiFilledInput', [
+  'root',
+  'focused',
+  'disabled',
+  'error',
+  'underline',
+  'input',
+]);
 
 export default filledInputClasses;

packages/material-ui/src/FormControl/formControlClasses.js

@@ -10,6 +10,7 @@ const formControlClasses = generateUtilityClasses('MuiFormControl', [
   'marginNormal',
   'marginDense',
   'fullWidth',
+  'disabled',
 ]);
 
 export default formControlClasses;

packages/material-ui/src/FormControlLabel/FormControlLabel.js

@@ -47,7 +47,7 @@ export const FormControlLabelRoot = experimentalStyled(
   WebkitTapHighlightColor: 'transparent',
   marginLeft: -11,
   marginRight: 16, // used for row presentation of radio/checkbox
-  '&.Mui-disabled': {
+  [`&.${formControlLabelClasses.disabled}`]: {
     cursor: 'default',
   },
   ...(styleProps.labelPlacement === 'start' && {
@@ -64,7 +64,7 @@ export const FormControlLabelRoot = experimentalStyled(
     marginLeft: 16,
   }),
   [`& .${formControlLabelClasses.label}`]: {
-    '&.Mui-disabled': {
+    [`&.${formControlLabelClasses.disabled}`]: {
       color: theme.palette.text.disabled,
     },
   },

packages/material-ui/src/FormHelperText/FormHelperText.js

@@ -7,7 +7,7 @@ import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import experimentalStyled from '../styles/experimentalStyled';
 import capitalize from '../utils/capitalize';
-import { getFormHelperTextUtilityClasses } from './formHelperTextClasses';
+import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses';
 import useThemeProps from '../styles/useThemeProps';
 
 const overridesResolver = (props, styles) => {
@@ -53,10 +53,10 @@ const FormHelperTextRoot = experimentalStyled(
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
-  '&.Mui-disabled': {
+  [`&.${formHelperTextClasses.disabled}`]: {
     color: theme.palette.text.disabled,
   },
-  '&.Mui-error': {
+  [`&.${formHelperTextClasses.error}`]: {
     color: theme.palette.error.main,
   },
   ...(styleProps.size === 'small' && {

packages/material-ui/src/FormLabel/FormLabel.js

@@ -50,13 +50,13 @@ export const FormLabelRoot = experimentalStyled(
   ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
-  '&.Mui-focused': {
+  [`&.${formLabelClasses.focused}`]: {
     color: theme.palette[styleProps.color].main,
   },
-  '&.Mui-disabled': {
+  [`&.${formLabelClasses.disabled}`]: {
     color: theme.palette.text.disabled,
   },
-  '&.Mui-error': {
+  [`&.${formLabelClasses.error}`]: {
     color: theme.palette.error.main,
   },
 }));
@@ -66,7 +66,7 @@ const AsteriskComponent = experimentalStyled(
   {},
   { name: 'MuiFormLabel', slot: 'Asterisk' },
 )(({ theme }) => ({
-  '&.Mui-error': {
+  [`&.${formLabelClasses.error}`]: {
     color: theme.palette.error.main,
   },
 }));

packages/material-ui/src/Input/Input.js

@@ -5,7 +5,7 @@ import { deepmerge, refType } from '@material-ui/utils';
 import InputBase from '../InputBase';
 import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
 import useThemeProps from '../styles/useThemeProps';
-import { getInputUtilityClass } from './inputClasses';
+import inputClasses, { getInputUtilityClass } from './inputClasses';
 import {
   overridesResolver as inputBaseOverridesResolver,
   InputBaseRoot,
@@ -64,10 +64,10 @@ const InputRoot = experimentalStyled(
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&.Mui-focused:after': {
+      [`&.${inputClasses.focused}:after`]: {
         transform: 'scaleX(1)',
       },
-      '&.Mui-error:after': {
+      [`&.${inputClasses.error}:after`]: {
         borderBottomColor: theme.palette.error.main,
         transform: 'scaleX(1)', // error is always underlined in red
       },
@@ -84,14 +84,14 @@ const InputRoot = experimentalStyled(
         }),
         pointerEvents: 'none', // Transparent to the hover style.
       },
-      '&:hover:not(.Mui-disabled):before': {
+      [`&:hover:not(.${inputClasses.disabled}):before`]: {
         borderBottom: `2px solid ${theme.palette.text.primary}`,
         // Reset on touch devices, it doesn't add specificity
         '@media (hover: none)': {
           borderBottom: `1px solid ${bottomLineColor}`,
         },
       },
-      '&.Mui-disabled:before': {
+      [`&.${inputClasses.disabled}:before`]: {
         borderBottomStyle: 'dotted',
       },
     }),

packages/material-ui/src/Input/inputClasses.js

@@ -4,6 +4,13 @@ export function getInputUtilityClass(slot) {
   return generateUtilityClass('MuiInput', slot);
 }
 
-const inputClasses = generateUtilityClasses('MuiInput', ['root', 'underline', 'input']);
+const inputClasses = generateUtilityClasses('MuiInput', [
+  'root',
+  'focused',
+  'error',
+  'disabled',
+  'underline',
+  'input',
+]);
 
 export default inputClasses;