如何覆写Material UI组件的根元素样式属性

针对需要覆写的根节点样式规则，以下是不同场景下的可行实现：

• 单组件快速覆写（MUI v5+ 推荐）
  直接使用组件内置的sx属性写入样式，所有样式默认直接作用于组件根元素，代码如下：

<InputAdornment
  position="end"
  sx={{
    height: '0.01em',
    display: 'flex',
    maxHeight: '2em',
    alignItems: 'center',
    whiteSpace: 'nowrap'
  }}
>
  hello
</InputAdornment>

• 可复用样式组件（MUI v5+ 推荐）
  如果同一段样式需要在多个地方复用，可以用styled工具封装带自定义样式的组件：

import { styled, InputAdornment } from '@mui/material';

const CustomInputAdornment = styled(InputAdornment)({
  height: '0.01em',
  display: 'flex',
  maxHeight: '2em',
  alignItems: 'center',
  whiteSpace: 'nowrap'
});

// 业务中使用
<CustomInputAdornment position="end">
  hello
</CustomInputAdornment>

• MUI v4 旧版本兼容写法
  v4版本可以通过classes属性指定根元素类名，搭配makeStyles注入样式：

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

const useStyles = makeStyles({
  rootAdornment: {
    height: '0.01em',
    display: 'flex',
    maxHeight: '2em',
    alignItems: 'center',
    whiteSpace: 'nowrap'
  }
});

// 组件内调用
const classes = useStyles();
<InputAdornment 
  position="end" 
  classes={{ root: classes.rootAdornment }}
>
  hello
</InputAdornment>

提示：所有MUI组件的classes.root配置项都默认指向组件最外层根节点，不需要额外查找DOM层级，直接传入自定义类即可覆盖默认根节点样式。

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