[core] replace hard-coded classname with classes (mui#29070)

Author: siriwatknp

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

@@ -13,6 +13,10 @@ import ListSubheader from '../ListSubheader';
 import Paper from '../Paper';
 import IconButton from '../IconButton';
 import Chip from '../Chip';
+import inputClasses from '../Input/inputClasses';
+import inputBaseClasses from '../InputBase/inputBaseClasses';
+import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
+import filledInputClasses from '../FilledInput/filledInputClasses';
 import ClearIcon from '../internal/svg-icons/Close';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import useThemeProps from '../styles/useThemeProps';
@@ -113,18 +117,18 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30,
     },
   },
-  '& .MuiInput-root': {
+  [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
       padding: '4px 4px 4px 0px',
     },
   },
-  '& .MuiInput-root.MuiInputBase-sizeSmall': {
-    '& .MuiInput-input': {
+  [`& .${inputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
+    [`& .${inputClasses.input}`]: {
       padding: '2px 4px 3px 0',
     },
   },
-  '& .MuiOutlinedInput-root': {
+  [`& .${outlinedInputClasses.root}`]: {
     padding: 9,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4 + 9,
@@ -139,13 +143,13 @@ const AutocompleteRoot = styled('div', {
       right: 9,
     },
   },
-  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+  [`& .${outlinedInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     padding: 6,
     [`& .${autocompleteClasses.input}`]: {
       padding: '2.5px 4px 2.5px 6px',
     },
   },
-  '& .MuiFilledInput-root': {
+  [`& .${filledInputClasses.root}`]: {
     paddingTop: 19,
     paddingLeft: 8,
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -154,16 +158,16 @@ const AutocompleteRoot = styled('div', {
     [`.${autocompleteClasses.hasPopupIcon}.${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 52 + 4 + 9,
     },
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '7px 4px',
     },
     [`& .${autocompleteClasses.endAdornment}`]: {
       right: 9,
     },
   },
-  '& .MuiFilledInput-root.MuiInputBase-sizeSmall': {
+  [`& .${filledInputClasses.root}.${inputBaseClasses.sizeSmall}`]: {
     paddingBottom: 1,
-    '& .MuiFilledInput-input': {
+    [`& .${filledInputClasses.input}`]: {
       padding: '2.5px 4px',
     },
   },

packages/mui-material/src/AvatarGroup/AvatarGroup.js

@@ -6,7 +6,7 @@ import { chainPropTypes } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/core';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import Avatar from '../Avatar';
+import Avatar, { avatarClasses } from '../Avatar';
 import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
 
 const SPACINGS = {
@@ -33,7 +33,7 @@ const AvatarGroupRoot = styled('div', {
     ...styles.root,
   }),
 })(({ theme }) => ({
-  [`& .MuiAvatar-root`]: {
+  [`& .${avatarClasses.root}`]: {
     border: `2px solid ${theme.palette.background.default}`,
     boxSizing: 'content-box',
     marginLeft: -8,

packages/mui-material/src/DialogContent/DialogContent.js

@@ -5,6 +5,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/core';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getDialogContentUtilityClass } from './dialogContentClasses';
+import dialogTitleClasses from '../DialogTitle/dialogTitleClasses';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, dividers } = ownerState;
@@ -37,7 +38,7 @@ const DialogContentRoot = styled('div', {
         borderBottom: `1px solid ${theme.palette.divider}`,
       }
     : {
-        '.MuiDialogTitle-root + &': {
+        [`.${dialogTitleClasses.root} + &`]: {
           paddingTop: 0,
         },
       }),