如何让makeStyles定义的样式优先级高于Material UI默认样式

问题本质 #

你遇到的样式覆盖问题是MUI v5版本的特性导致的：@mui/styles 是MUI v4的旧样式方案，在v5中属于遗留兼容包，默认生成的JSS样式注入顺序早于MUI核心组件基于Emotion生成的内置样式，当选择器特异性相同时，后注入的默认样式会覆盖你用makeStyles写的自定义样式，并非makeStyles无法用于自定义MUI组件。

解决方法（无需使用!important） #

方法1：提升单个样式的选择器特异性（最推荐，灵活无侵入） #

只需要在你要覆盖默认样式的类名样式外层包裹&&选择器，编译后会生成两个重复的类名选择器，特异性是MUI单个类选择器的2倍，必然覆盖默认样式：

const useStyles = makeStyles((theme) =>
  createStyles({
    differentButton:{
      // 加&&提升优先级
      '&&': {
        backgroundColor: 'green',
        fontSize: '30px',
        opacity: '80%',
      }
    },
    foo: (props) => ({
      '&&': {
        backgroundColor: props.backgroundColor,
      }
    }),
  }),
);

方法2：调整当前makeStyles的注入优先级 #

在创建makeStyles时传入第二个配置参数，设置index属性，数值越大样式注入位置越靠后，优先级越高，MUI默认样式的index值为1，设置大于1的数值即可让当前useStyles生成的所有样式优先级高于默认样式：

const useStyles = makeStyles((theme) =>
  createStyles({
    // 你的原有样式
  }),
  { index: 10 } // 数值大于1即可
);

方法3：全局配置JSS注入位置（适合项目大量使用makeStyles的场景） #

在项目根组件外层包裹StylesProvider，统一配置JSS样式的插入位置，让所有makeStyles生成的样式都排在MUI Emotion样式的后面，优先级全局提升：

// 入口文件比如index.js
import { StylesProvider, jssPreset } from '@mui/styles';
import { create } from 'jss';
import App from './App';

const jss = create({
  ...jssPreset(),
  // 配置插入点到MUI Emotion样式之后
  insertionPoint: document.head.lastChild,
});

ReactDOM.render(
  <StylesProvider jss={jss}>
    <App />
  </StylesProvider>,
  document.getElementById('root')
);

额外注意事项 #

你当前代码中第一个<Button>组件没有被ThemeProvider包裹，自定义主题配置不会对它生效，如果需要所有组件复用自定义主题，需要把所有MUI组件都放到ThemeProvider的内部。

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