MUI5中useStyles设置fontSize不生效，同写法在v4可用原因问询

你遇到的样式失效问题是MUI v5的样式注入逻辑和优先级规则变动导致的，核心原因如下：

• MUI v5默认使用Emotion作为样式引擎，内置组件的默认样式注入优先级高于@mui/styles包提供的makeStyles生成的自定义类优先级
• 你设置的backgroundColor生效是因为EmojiObjectsIcon内置没有设置背景色规则，你的自定义类可以直接生效；而组件内置了font-size的默认规则，优先级比你单独的classes.icon更高，所以被覆盖无法生效
• v4版本中makeStyles生成的类优先级高于组件内置样式，所以之前的写法可以正常运行

方案1：提升自定义样式优先级（无需修改现有写法结构） #

给你的icon样式规则增加双重&符提升特异性，就能覆盖组件内置的font-size规则：

const useStyles = makeStyles((theme: Theme) => ({
  root: {
    flexGrow: 1,
  },
  icon: {
    // 加&&提升样式优先级
    '&&': {
      fontSize: 140,
    },
    backgroundColor: 'red',
     '&:hover': {
       backgroundColor: 'red',
   },
  },
}));

方案2：使用MUI v5推荐的sx属性（更适配v5的写法） #

直接在图标组件上用sx属性设置样式，sx属性默认优先级高于内置样式：

<Box style={{ display: 'flex', alignItems: 'center' }}>
    <EmojiObjectsIcon 
      color='primary' 
      sx={{ fontSize: 140, backgroundColor: 'red', '&:hover': { backgroundColor: 'red' } }}
      onClick={switchTheme} 
    />
</Box>

方案3：用styled组件封装自定义图标 #

import { styled } from '@mui/material/styles';
import EmojiObjectsIcon from '@mui/icons-material/EmojiObjects';

const CustomEmojiIcon = styled(EmojiObjectsIcon)(({ theme }) => ({
  fontSize: 140,
  backgroundColor: 'red',
  '&:hover': {
    backgroundColor: 'red',
  },
}));

// 使用时直接调用
<Box style={{ display: 'flex', alignItems: 'center' }}>
    <CustomEmojiIcon color='primary' onClick={switchTheme} />
</Box>

内容的提问来源于stack exchange，提问作者Richardson