Material UI通过makeStyles设置margin样式不生效如何解决

使用Material UI的makeStyles方案编写组件样式时，除margin外其余样式均可正常渲染，仅margin属性无法成功应用到页面。

样式定义（函数组件外部） #

const useStyles = makeStyles({
  tool: {
    width:'100%',
    display: 'inline-flex',
    justifyContent: 'space-between',
  },
  lastBtn: {
    marginLeft: 10,
    marginRight: 50,
  }
})

组件内调用 #

const classes = useStyles();

普通DOM元素绑定className={classes.xxx}时样式完全正常，可以排除useStyles hook本身的调用问题。但给MUI Button组件绑定className时，margin样式完全不生效：

<Button
  className={classes.lastBtn}
  variant='contained' 
  size='large' 
  onClick={() => navigate("/register")}
>
  Register
</Button>

把class样式替换为内联样式后，margin可正常生效：

style={{ marginLeft: 10, marginRight: 50}}

核心是CSS选择器权重和样式插入顺序共同导致的：

1. MUI Button组件自带的默认样式通过内部类选择器注入，默认就带margin: 0规则，和你用makeStyles生成的自定义类选择器权重完全相同。
2. 如果你用的是MUI v4，或者v5版本里用@mui/styles兼容包的makeStyles，默认会把自定义样式表插在MUI内置组件样式表的前面。CSS规则同权重时，后插入的样式会覆盖前面的，所以你写的margin直接被Button自带的margin:0顶掉了。
3. 内联样式权重本身比类选择器高一级，不管插入顺序如何都会优先生效，所以写内联样式没问题。
4. 你之前写的width、display这些属性没出问题，是因为Button默认样式里根本没定义这几个属性，不存在规则冲突，自然能正常生效。

三种方案任选即可：

• 方案1：在makeStyles里用&&语法提升自定义样式的权重，双与号会重复生成当前类名的选择器，权重直接翻倍，足以覆盖默认样式：

const useStyles = makeStyles({
  // 其余样式保持不变
  lastBtn: {
    '&&': {
      marginLeft: 10,
      marginRight: 50,
    }
  }
})

• 方案2：调整样式注入顺序，在项目根节点配置StylesProvider的injectFirst属性，将MUI默认样式注入到样式表最顶部，让自定义样式在同权重下优先生效：

// 项目入口文件（通常是index.jsx）
import { StylesProvider } from '@mui/styles';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <StylesProvider injectFirst>
    <App />
  </StylesProvider>,
  document.getElementById('root')
);

• 方案3：使用MUI v5+官方推荐的sx属性编写组件样式，不存在优先级冲突问题，也不需要额外维护独立的class：

<Button
  sx={{
    marginLeft: '10px',
    marginRight: '50px'
  }}
  variant='contained' 
  size='large' 
  onClick={() => navigate("/register")}
>
  Register
</Button>

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