如何提升MUI makeStyle的CSS优先级以覆盖组件根样式？

以下是针对你用makeStyles设置fontWeight: 'bold'不生效问题的几种解决办法：

1. 确认样式是否正确绑定到组件 #

首先检查你是否将定义好的类名正确传递给了MUI组件。比如使用TableCell时，必须显式设置className属性：

import TableCell from '@material-ui/core/TableCell';
import tableStyle from './tableStyle';

function MyTable() {
  const classes = tableStyle();
  return (
    <TableCell className={classes.CustomTableCell_1}>需要加粗的内容</TableCell>
  );
}

2. 增强样式选择器的特异性 #

MUI组件自带的样式可能具有更高优先级，你可以通过嵌套选择器提升自定义样式的权重。比如直接针对MUI的内置类名MuiTableCell-root进行覆盖：

import { makeStyles } from '@material-ui/core';

const tableStyle = makeStyles(() => ({
  CustomTable:{
    borderCollapse: 'separate',
    borderSpacing: '0px 8px',
    paddingInline: '8px',
  },
  CustomTableCell_1:{
    backgroundColor: '#F7EDF4',
    // 嵌套内置类提升特异性
    '&.MuiTableCell-root': {
      fontWeight: 'bold',
    },
    borderTopLeftRadius: '100px',
    borderBottomLeftRadius: '100px',
    paddingBlock: '16px',
    paddingInline: '24px',
  },
  CustomTableCell_2:{
    backgroundColor: '#F7EDF4',
    borderTopRightRadius: '100px',
    borderBottomRightRadius: '100px',
    paddingBlock: '16px',
    paddingInline: '24px',
  },
}));
export default tableStyle;

3. 正确使用!important #

如果需要强制覆盖，要将样式值写成包含!important的字符串形式（注意不是分开写）：

CustomTableCell_1:{
  backgroundColor: '#F7EDF4',
  fontWeight: 'bold !important', // 正确写法
  // 其他样式...
}

4. 检查MUI版本对应的导入路径 #

如果你使用的是MUI v5，makeStyles已经从@material-ui/core迁移到了@mui/styles，需要修改导入语句：

import { makeStyles } from '@mui/styles'; // MUI v5 正确导入路径

5. 用浏览器开发者工具排查冲突 #

打开浏览器开发者工具（F12），选中目标元素查看样式面板，找到font-weight属性，看哪个样式规则优先级更高，针对性调整自定义样式的选择器或权重。

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