MUI v5使用makeStyles给TextField设置margin不生效如何解决

问题原因 #

• MUI v5 已将默认样式解决方案从 JSS（makeStyles 所属的方案）切换为 Emotion，@mui/styles 属于遗留兼容方案，默认生成的样式优先级低于 MUI 组件自带的内置样式，因此margin、padding这类会被组件默认样式覆盖的属性不生效；而backgroundColor因为组件默认没有设置根元素背景色，所以可以正常显示。
• TextField 是复合组件，直接给根节点设置的内边距默认不会作用到内部的输入框区域，这也是padding看起来不生效的原因之一。

解决方案 #

方案1：使用MUI v5 官方推荐的sx属性（最简便，无需额外引入） #

直接在TextField组件上通过sx属性写样式，优先级最高，不会被默认样式覆盖：

<TextField
  sx={{
    marginBottom: '100px',
    backgroundColor: 'red',
    // 如果要调整输入框内部的内边距，加上下面的配置
    '& .MuiInputBase-input': {
      padding: '100px'
    }
  }}
  label="Note Title"
  variant="outlined"
  color="secondary"
  fullWidth
  required
  error={titleError}
/>

方案2：给makeStyles的属性添加!important强制提升优先级（仅兼容遗留代码使用，不推荐长期依赖） #

修改你原来的useStyles定义：

const useStyles = makeStyles({
  field: {
    padding: '100px !important',
    backgroundColor: 'red',
    marginBottom: '100px !important',
  },
});

方案3：使用styled组件创建自定义样式组件 #

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

const StyledTextField = styled(TextField)(() => ({
  backgroundColor: 'red',
  marginBottom: '100px',
  '& .MuiInputBase-input': {
    padding: '100px'
  }
}));

// 组件内直接替换原来的TextField即可
<StyledTextField
  label="Note Title"
  variant="outlined"
  color="secondary"
  fullWidth
  required
  error={titleError}
/>

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