React MUI 5自定义样式无法覆盖默认样式问题求助

问题根源 #

MUI 5 默认采用 Emotion 作为样式方案，你当前使用的 @mui/styles 是旧版的 JSS 实现。由于 Emotion 生成的默认样式插入顺序在 JSS 之后，导致默认样式优先级高于你通过 makeStyles 定义的自定义样式，最终出现自定义样式被覆盖的情况。

具体解决方案 #

方案一：改用 MUI 5 推荐的 styled API（替代 makeStyles） #

这是最符合 MUI 5 设计理念的方案，样式优先级与默认样式一致，能确保自定义样式生效：

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const BTN_WIDTH = 160;
const BTN_MIN_HEIGHT = 34;

// 创建自定义Button组件
const CustomButton = styled(Button)(({ theme }) => ({
  width: BTN_WIDTH,
  minHeight: BTN_MIN_HEIGHT,
  paddingLeft: theme.spacing(2),
  paddingRight: theme.spacing(2),
}));

// 使用示例
<CustomButton variant="contained">自定义按钮</CustomButton>

方案二：提升 JSS 样式优先级（不更换方案时使用） #

如果不想替换 makeStyles，可以通过嵌套默认类名的方式提升样式优先级：

import { Theme } from '@mui/material';
import { makeStyles } from '@mui/styles';

const BTN_WIDTH = 160;
const BTN_MIN_HEIGHT = 34;

export default makeStyles((theme: Theme) => ({
  btn: {
    // 嵌套MUI Button的根类名，提升样式优先级
    '&.MuiButton-root': {
      width: BTN_WIDTH,
      minHeight: BTN_MIN_HEIGHT,
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
    }
  }
}));

// 使用示例
<Button className={classes.btn} variant="contained">自定义按钮</Button>

方案三：使用 sx 快速自定义样式 #

如果只是简单的样式调整，sx 属性是更轻便的选择，它的优先级足够覆盖默认样式：

import Button from '@mui/material/Button';

const BTN_WIDTH = 160;
const BTN_MIN_HEIGHT = 34;

// 使用示例
<Button
  variant="contained"
  sx={{
    width: BTN_WIDTH,
    minHeight: BTN_MIN_HEIGHT,
    px: 2, // 等价于theme.spacing(2)，对应左右内边距
  }}
>
  自定义按钮
</Button>

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