diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
index 7e6588a1e1e787..3d92ca3fb90e3a 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.js
+++ b/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,
diff --git a/packages/material-ui/src/Autocomplete/autocompleteClasses.js b/packages/material-ui/src/Autocomplete/autocompleteClasses.js
index 39689ac2478586..215065835f45f1 100644
--- a/packages/material-ui/src/Autocomplete/autocompleteClasses.js
+++ b/packages/material-ui/src/Autocomplete/autocompleteClasses.js
@@ -8,6 +8,7 @@ const autocompleteClasses = generateUtilityClasses('MuiAutocomplete', [
   'root',
   'fullWidth',
   'focused',
+  'focusVisible',
   'tag',
   'tagSizeSmall',
   'tagSizeMedium',
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index 4fd270f676d87e..cf52016d61dfa0 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/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',
       },
     },
diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
index e5eb416ba0f9df..2e8c4493bff9db 100644
--- a/packages/material-ui/src/ButtonBase/ButtonBase.js
+++ b/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',
   },
diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.js b/packages/material-ui/src/ButtonGroup/ButtonGroup.js
index 64fef87ddc6416..e9a8bb59989d8f 100644
--- a/packages/material-ui/src/ButtonGroup/ButtonGroup.js
+++ b/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}`,
           },
         }),
diff --git a/packages/material-ui/src/CardActionArea/CardActionArea.js b/packages/material-ui/src/CardActionArea/CardActionArea.js
index 3ea68c62469fb1..c832cec8e76fef 100644
--- a/packages/material-ui/src/CardActionArea/CardActionArea.js
+++ b/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,
   },
 }));
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index 912d7f210a3734..05c46bb0db3423 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/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,
     },
   }),
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index a11ed55fb8f49e..1e80e0300447d0 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/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,
diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js
index 76eefffbba88d5..09e2d56e69a1ce 100644
--- a/packages/material-ui/src/Fab/Fab.js
+++ b/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,
diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
index c28b0e5bc5d62d..903c5969abe516 100644
--- a/packages/material-ui/src/FilledInput/FilledInput.js
+++ b/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',
       },
     }),
diff --git a/packages/material-ui/src/FilledInput/filledInputClasses.js b/packages/material-ui/src/FilledInput/filledInputClasses.js
index 20b29a507dc290..9d13af49557756 100644
--- a/packages/material-ui/src/FilledInput/filledInputClasses.js
+++ b/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;
diff --git a/packages/material-ui/src/FormControl/formControlClasses.js b/packages/material-ui/src/FormControl/formControlClasses.js
index afd2e623acd5ba..6fdc6f36089d06 100644
--- a/packages/material-ui/src/FormControl/formControlClasses.js
+++ b/packages/material-ui/src/FormControl/formControlClasses.js
@@ -10,6 +10,7 @@ const formControlClasses = generateUtilityClasses('MuiFormControl', [
   'marginNormal',
   'marginDense',
   'fullWidth',
+  'disabled',
 ]);
 
 export default formControlClasses;
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index dfaf3de842121b..db84cb721db925 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/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,
     },
   },
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index a0ddf5e79cd167..d06c4543c8a80c 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/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' && {
diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js
index 459b8eaf29522c..61a4b6d77e1bed 100644
--- a/packages/material-ui/src/FormLabel/FormLabel.js
+++ b/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,
   },
 }));
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 4063d64e896f4a..26969cba2f8148 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/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',
       },
     }),
diff --git a/packages/material-ui/src/Input/inputClasses.js b/packages/material-ui/src/Input/inputClasses.js
index 5120b2561ca098..ac721073772112 100644
--- a/packages/material-ui/src/Input/inputClasses.js
+++ b/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;
diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
index 19320d459c74dc..99b9f9a2b97e84 100644
--- a/packages/material-ui/src/InputBase/InputBase.js
+++ b/packages/material-ui/src/InputBase/InputBase.js
@@ -107,7 +107,7 @@ export const InputBaseRoot = experimentalStyled(
   cursor: 'text',
   display: 'inline-flex',
   alignItems: 'center',
-  '&.Mui-disabled': {
+  [`&.${inputBaseClasses.disabled}`]: {
     color: theme.palette.text.disabled,
     cursor: 'default',
   },
@@ -190,7 +190,7 @@ export const InputBaseComponent = experimentalStyled(
       '&:focus:-ms-input-placeholder': placeholderVisible, // IE11
       '&:focus::-ms-input-placeholder': placeholderVisible, // Edge
     },
-    '&.Mui-disabled': {
+    [`&.${inputBaseClasses.disabled}`]: {
       opacity: 1, // Reset iOS opacity
       WebkitTextFillColor: theme.palette.text.disabled, // Fix opacity Safari bug
     },
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 9ee1ba0ca124cd..2b25146e89b985 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -53,7 +53,7 @@ export const nativeSelectRootStyles = ({ styleProps, theme }) => ({
   '&::-ms-expand': {
     display: 'none',
   },
-  '&.Mui-disabled': {
+  [`&.${nativeSelectClasses.disabled}`]: {
     cursor: 'default',
   },
   '&[multiple]': {
@@ -97,7 +97,7 @@ export const nativeSelectIconStyles = ({ styleProps, theme }) => ({
   top: 'calc(50% - 12px)', // Center vertically
   pointerEvents: 'none', // Don't block pointer events on the select under the icon.
   color: theme.palette.action.active,
-  '&.Mui-disabled': {
+  [`&.${nativeSelectClasses.disabled}`]: {
     color: theme.palette.action.disabled,
   },
   ...(styleProps.open && {
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
index d9ca7b8ff7ba7b..a0b1def4f211de 100644
--- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js
+++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -54,14 +54,14 @@ const OutlinedInputRoot = experimentalStyled(
         borderColor,
       },
     },
-    [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
+    [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: theme.palette[styleProps.color].main,
       borderWidth: 2,
     },
-    [`&.Mui-error .${outlinedInputClasses.notchedOutline}`]: {
+    [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: theme.palette.error.main,
     },
-    [`&.Mui-disabled .${outlinedInputClasses.notchedOutline}`]: {
+    [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
       borderColor: theme.palette.action.disabled,
     },
     ...(styleProps.startAdornment && {
diff --git a/packages/material-ui/src/OutlinedInput/outlinedInputClasses.js b/packages/material-ui/src/OutlinedInput/outlinedInputClasses.js
index a926d5b86b69e6..c74405362f821f 100644
--- a/packages/material-ui/src/OutlinedInput/outlinedInputClasses.js
+++ b/packages/material-ui/src/OutlinedInput/outlinedInputClasses.js
@@ -6,6 +6,9 @@ export function getOutlinedInputUtilityClass(slot) {
 
 const outlinedInputClasses = generateUtilityClasses('MuiOutlinedInput', [
   'root',
+  'focused',
+  'error',
+  'disabled',
   'notchedOutline',
   'input',
 ]);
diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js
index 40f7c51a938884..c543ff3a7fec53 100644
--- a/packages/material-ui/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui/src/PaginationItem/PaginationItem.js
@@ -83,7 +83,7 @@ const PaginationItemEllipsis = experimentalStyled(
   color: theme.palette.text.primary,
   height: 'auto',
   /* Styles applied to the root element if `disabled="true"`. */
-  '&.Mui-disabled': {
+  [`&.${paginationItemClasses.disabled}`]: {
     opacity: theme.palette.action.disabledOpacity,
   },
   /* Styles applied to the root element if `size="small"`. */
@@ -122,11 +122,11 @@ const PaginationItemPage = experimentalStyled(
     padding: '0 6px',
     margin: '0 3px',
     color: theme.palette.text.primary,
-    '&.Mui-focusVisible': {
+    [`&.${paginationItemClasses.focusVisible}`]: {
       backgroundColor: theme.palette.action.focus,
     },
     /* Styles applied to the root element if `disabled="true"`. */
-    '&.Mui-disabled': {
+    [`&.${paginationItemClasses.disabled}`]: {
       opacity: theme.palette.action.disabledOpacity,
     },
     /* Styles applied to the root element if `type="page"`. */
@@ -141,7 +141,7 @@ const PaginationItemPage = experimentalStyled(
           backgroundColor: 'transparent',
         },
       },
-      '&.Mui-selected': {
+      [`&.${paginationItemClasses.selected}`]: {
         backgroundColor: theme.palette.action.selected,
         '&:hover': {
           backgroundColor: alpha(
@@ -153,13 +153,13 @@ const PaginationItemPage = experimentalStyled(
             backgroundColor: theme.palette.action.selected,
           },
         },
-        '&.Mui-focusVisible': {
+        [`&.${paginationItemClasses.focusVisible}`]: {
           backgroundColor: alpha(
             theme.palette.action.selected,
             theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
           ),
         },
-        '&.Mui-disabled': {
+        [`&.${paginationItemClasses.disabled}`]: {
           opacity: 1,
           color: theme.palette.action.disabled,
           backgroundColor: theme.palette.action.selected,
@@ -190,7 +190,7 @@ const PaginationItemPage = experimentalStyled(
   ({ theme, styleProps }) => ({
     /* Styles applied to the root element if `variant="text"`. */
     ...(styleProps.variant === 'text' && {
-      '&.Mui-selected': {
+      [`&.${paginationItemClasses.selected}`]: {
         ...(styleProps.color !== 'standard' && {
           color: theme.palette[styleProps.color].contrastText,
           backgroundColor: theme.palette[styleProps.color].main,
@@ -201,11 +201,11 @@ const PaginationItemPage = experimentalStyled(
               backgroundColor: theme.palette[styleProps.color].main,
             },
           },
-          '&.Mui-focusVisible': {
+          [`&.${paginationItemClasses.focusVisible}`]: {
             backgroundColor: theme.palette[styleProps.color].dark,
           },
         }),
-        '&.Mui-disabled': {
+        [`&.${paginationItemClasses.disabled}`]: {
           color: theme.palette.action.disabled,
         },
       },
@@ -215,7 +215,7 @@ const PaginationItemPage = experimentalStyled(
       border: `1px solid ${
         theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
       }`,
-      '&.Mui-selected': {
+      [`&.${paginationItemClasses.selected}`]: {
         ...(styleProps.color !== 'standard' && {
           color: theme.palette[styleProps.color].main,
           border: `1px solid ${alpha(theme.palette[styleProps.color].main, 0.5)}`,
@@ -233,14 +233,14 @@ const PaginationItemPage = experimentalStyled(
               backgroundColor: 'transparent',
             },
           },
-          '&.Mui-focusVisible': {
+          [`&.${paginationItemClasses.focusVisible}`]: {
             backgroundColor: alpha(
               theme.palette[styleProps.color].main,
               theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity,
             ),
           },
         }),
-        '&.Mui-disabled': {
+        [`&.${paginationItemClasses.disabled}`]: {
           borderColor: theme.palette.action.disabledBackground,
           color: theme.palette.action.disabled,
         },
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index aad87b70e3e49d..708b08f6cb7552 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -9,7 +9,7 @@ import { alpha } from '../styles/colorManipulator';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
-import { getRadioUtilityClass } from './radioClasses';
+import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import experimentalStyled, { shouldForwardProp } from '../styles/experimentalStyled';
 
 const overridesResolver = (props, styles) => {
@@ -44,7 +44,7 @@ const RadioRoot = experimentalStyled(
   color: theme.palette.text.secondary,
   /* Styles applied to the root element unless `color="default"`. */
   ...(styleProps.color !== 'default' && {
-    '&.Mui-checked': {
+    [`&.${radioClasses.checked}`]: {
       color: theme.palette[styleProps.color].main,
       '&:hover': {
         backgroundColor: alpha(
@@ -58,7 +58,7 @@ const RadioRoot = experimentalStyled(
       },
     },
   }),
-  '&.Mui-disabled': {
+  [`&.${radioClasses.disabled}`]: {
     color: theme.palette.action.disabled,
   },
 }));
diff --git a/packages/material-ui/src/Rating/Rating.js b/packages/material-ui/src/Rating/Rating.js
index c06640faeb2894..2c6a3a03815361 100644
--- a/packages/material-ui/src/Rating/Rating.js
+++ b/packages/material-ui/src/Rating/Rating.js
@@ -106,11 +106,11 @@ const RatingRoot = experimentalStyled(
   cursor: 'pointer',
   textAlign: 'left',
   WebkitTapHighlightColor: 'transparent',
-  '&.Mui-disabled': {
+  [`&.${ratingClasses.disabled}`]: {
     opacity: theme.palette.action.disabledOpacity,
     pointerEvents: 'none',
   },
-  [`&.Mui-focusVisible .${ratingClasses.iconActive}`]: {
+  [`&.${ratingClasses.focusVisible} .${ratingClasses.iconActive}`]: {
     outline: '1px solid #999',
   },
   [`& .${ratingClasses.visuallyHidden}`]: visuallyHidden,
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
index 740ed8052e383d..27fe07d23f36f8 100644
--- a/packages/material-ui/src/Select/Select.test.js
+++ b/packages/material-ui/src/Select/Select.test.js
@@ -698,7 +698,7 @@ describe('<Select />', () => {
       expect(option).toHaveFocus();
       fireEvent.click(option);
 
-      expect(container.querySelectorAll('.Mui-focused').length).to.equal(0);
+      expect(container.querySelectorAll(classes.focused).length).to.equal(0);
       expect(openSelect).toHaveFocus();
     });
 
diff --git a/packages/material-ui/src/Select/selectClasses.js b/packages/material-ui/src/Select/selectClasses.js
index 6103cf6f57d460..5a18444f3bda7b 100644
--- a/packages/material-ui/src/Select/selectClasses.js
+++ b/packages/material-ui/src/Select/selectClasses.js
@@ -11,6 +11,7 @@ const selectClasses = generateUtilityClasses('MuiSelect', [
   'outlined',
   'selectMenu',
   'disabled',
+  'focused',
   'icon',
   'iconOpen',
   'iconFilled',
diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js
index 804d5591a52c1b..f52d8dd2081042 100644
--- a/packages/material-ui/src/Slider/Slider.test.js
+++ b/packages/material-ui/src/Slider/Slider.test.js
@@ -543,7 +543,7 @@ describe('<Slider />', () => {
           MuiSlider: {
             styleOverrides: {
               root: {
-                '&.Mui-disabled': {
+                [`&.${classes.disabled}`]: {
                   mixBlendMode: 'darken',
                 },
               },
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 9e31f85e3e7d61..0914dfb154045b 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -95,7 +95,7 @@ const SwitchRoot = experimentalStyled(
     },
     [`& .${switchClasses.switchBase}`]: {
       padding: 4,
-      '&.Mui-checked': {
+      [`&.${switchClasses.checked}`]: {
         transform: 'translateX(16px)',
       },
     },
@@ -120,16 +120,16 @@ const SwitchSwitchBase = experimentalStyled(
     transition: theme.transitions.create(['left', 'transform'], {
       duration: theme.transitions.duration.shortest,
     }),
-    '&.Mui-checked': {
+    [`&.${switchClasses.checked}`]: {
       transform: 'translateX(20px)',
     },
-    '&.Mui-disabled': {
+    [`&.${switchClasses.disabled}`]: {
       color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
     },
-    [`&.Mui-checked + .${switchClasses.track}`]: {
+    [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
       opacity: 0.5,
     },
-    [`&.Mui-disabled + .${switchClasses.track}`]: {
+    [`&.${switchClasses.disabled} + .${switchClasses.track}`]: {
       opacity: theme.palette.mode === 'light' ? 0.12 : 0.2,
     },
     [`& .${switchClasses.input}`]: {
@@ -141,7 +141,7 @@ const SwitchSwitchBase = experimentalStyled(
   ({ theme, styleProps }) => ({
     /* Styles applied to the internal SwitchBase component element unless `color="default"`. */
     ...(styleProps.color !== 'default' && {
-      '&.Mui-checked': {
+      [`&.${switchClasses.checked}`]: {
         color: theme.palette[styleProps.color].main,
         '&:hover': {
           backgroundColor: alpha(
@@ -152,14 +152,14 @@ const SwitchSwitchBase = experimentalStyled(
             backgroundColor: 'transparent',
           },
         },
-        '&.Mui-disabled': {
+        [`&.${switchClasses.disabled}`]: {
           color:
             theme.palette.mode === 'light'
               ? lighten(theme.palette[styleProps.color].main, 0.62)
               : darken(theme.palette[styleProps.color].main, 0.55),
         },
       },
-      [`&.Mui-checked + .${switchClasses.track}`]: {
+      [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
         backgroundColor: theme.palette[styleProps.color].main,
       },
     }),
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index 5403a17c750176..7f7d63220c32fb 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -80,30 +80,30 @@ const TabRoot = experimentalStyled(
   ...(styleProps.textColor === 'inherit' && {
     color: 'inherit',
     opacity: 0.6, // same opacity as theme.palette.text.secondary
-    '&.Mui-selected': {
+    [`&.${tabClasses.selected}`]: {
       opacity: 1,
     },
-    '&.Mui-disabled': {
+    [`&.${tabClasses.disabled}`]: {
       opacity: theme.palette.action.disabledOpacity,
     },
   }),
   /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="primary"`. */
   ...(styleProps.textColor === 'primary' && {
     color: theme.palette.text.secondary,
-    '&.Mui-selected': {
+    [`&.${tabClasses.selected}`]: {
       color: theme.palette.primary.main,
     },
-    '&.Mui-disabled': {
+    [`&.${tabClasses.disabled}`]: {
       color: theme.palette.text.disabled,
     },
   }),
   /* Styles applied to the root element if the parent [`Tabs`](/api/tabs/) has `textColor="secondary"`. */
   ...(styleProps.textColor === 'secondary' && {
     color: theme.palette.text.secondary,
-    '&.Mui-selected': {
+    [`&.${tabClasses.selected}`]: {
       color: theme.palette.secondary.main,
     },
-    '&.Mui-disabled': {
+    [`&.${tabClasses.disabled}`]: {
       color: theme.palette.text.disabled,
     },
   }),
diff --git a/packages/material-ui/src/TabScrollButton/TabScrollButton.js b/packages/material-ui/src/TabScrollButton/TabScrollButton.js
index f09a2aea9e5c38..a2b6fd4ddddb07 100644
--- a/packages/material-ui/src/TabScrollButton/TabScrollButton.js
+++ b/packages/material-ui/src/TabScrollButton/TabScrollButton.js
@@ -10,7 +10,7 @@ import ButtonBase from '../ButtonBase';
 
 import useThemeProps from '../styles/useThemeProps';
 import experimentalStyled from '../styles/experimentalStyled';
-import { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
+import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
 
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;
@@ -46,7 +46,7 @@ const TabScrollButtonRoot = experimentalStyled(
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
-  '&.Mui-disabled': {
+  [`&.${tabScrollButtonClasses.disabled}`]: {
     opacity: 0,
   },
   /* Styles applied to the root element if `orientation="vertical"`. */
diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js
index c71f299a57b2b9..dad8c236e3d8bd 100644
--- a/packages/material-ui/src/TableRow/TableRow.js
+++ b/packages/material-ui/src/TableRow/TableRow.js
@@ -49,7 +49,7 @@ const TableRowRoot = experimentalStyled(
   [`&.${tableRowClasses.hover}:hover`]: {
     backgroundColor: theme.palette.action.hover,
   },
-  '&.Mui-selected': {
+  [`&.${tableRowClasses.selected}`]: {
     backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
     '&:hover': {
       backgroundColor: alpha(
diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js
index ea912b6f10105b..9b3ad349a4c22b 100644
--- a/packages/material-ui/src/ToggleButton/ToggleButton.js
+++ b/packages/material-ui/src/ToggleButton/ToggleButton.js
@@ -60,7 +60,7 @@ const ToggleButtonRoot = experimentalStyled(
   ...(styleProps.fullWidth && {
     width: '100%',
   }),
-  '&.Mui-disabled': {
+  [`&.${toggleButtonClasses.disabled}`]: {
     color: theme.palette.action.disabled,
     border: `1px solid ${theme.palette.action.disabledBackground}`,
   },
@@ -74,7 +74,7 @@ const ToggleButtonRoot = experimentalStyled(
   },
   /* Styles applied to the root element if `color="standard"`. */
   ...(styleProps.color === 'standard' && {
-    '&.Mui-selected': {
+    [`&.${toggleButtonClasses.selected}`]: {
       color: theme.palette.text.primary,
       backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
       '&:hover': {
@@ -91,7 +91,7 @@ const ToggleButtonRoot = experimentalStyled(
   }),
   /* Styles applied to the root element if `color!="standard"`. */
   ...(styleProps.color !== 'standard' && {
-    '&.Mui-selected': {
+    [`&.${toggleButtonClasses.selected}`]: {
       color: theme.palette[styleProps.color].main,
       backgroundColor: alpha(
         theme.palette[styleProps.color].main,
diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
index 4c3b17d5ba32f2..a4d40d53baa73a 100644
--- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
+++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js
@@ -74,7 +74,7 @@ const ToggleButtonGroupRoot = experimentalStyled(
             borderTopRightRadius: 0,
             borderBottomRightRadius: 0,
           },
-          [`&.Mui-selected + .${toggleButtonGroupClasses.grouped}.Mui-selected`]: {
+          [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
             borderLeft: 0,
             marginLeft: 0,
           },
@@ -91,7 +91,7 @@ const ToggleButtonGroupRoot = experimentalStyled(
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
           },
-          [`&.Mui-selected + .${toggleButtonGroupClasses.grouped}.Mui-selected`]: {
+          [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
             borderTop: 0,
             marginTop: 0,
           },
diff --git a/packages/material-ui/src/ToggleButtonGroup/toggleButtonGroupClasses.js b/packages/material-ui/src/ToggleButtonGroup/toggleButtonGroupClasses.js
index f96a02951ff082..1796c48fd8466a 100644
--- a/packages/material-ui/src/ToggleButtonGroup/toggleButtonGroupClasses.js
+++ b/packages/material-ui/src/ToggleButtonGroup/toggleButtonGroupClasses.js
@@ -6,6 +6,7 @@ export function getToggleButtonGroupUtilityClass(slot) {
 
 const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', [
   'root',
+  'selected',
   'vertical',
   'grouped',
   'groupedHorizontal',