如何通过makeStyles为TextField的input类注入样式（无需!important）

问题背景 #

用makeStyles自定义MUI TextField输入框的padding时，生成的.makeStyles-input类优先级低于默认的MuiOutlinedInput-root相关样式，导致自定义padding不生效。要求不依赖OutlineInput/FilledInput单独组件，也不用!important，让样式正确作用到input元素上。

原代码问题分析 #

原代码把自定义样式绑定到了InputProps.classes.root，但root对应的是输入框的外层容器（比如MuiOutlinedInput-root），而控制输入框内边距的是内部的<input>元素（对应类MuiOutlinedInput-input），样式没作用到正确的元素上，所以不生效。

解决方案 #

修改InputProps.classes的绑定key，从root改为input，让自定义样式直接作用到实际的输入框元素：

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

const useStyles = makeStyles({
  input: {
    padding: 0,
  },
});

function CustomTextField(props) {
  const classes = useStyles();

  return (
    <TextField
      InputProps={{
        classes: {
          input: classes.input, // 替换root为input
        },
      }}
      {...props}
    />
  );
}

原理说明 #

MUI的Input组件（TextField内部的输入框容器）的classes属性提供了多个预设key，其中input专门对应DOM层面的<input>元素。把自定义样式绑定到这个key后，生成的自定义类会直接附加到input元素上，和默认的MuiOutlinedInput-input类权重相同，此时自定义样式会因为CSS的“后定义优先”规则（只要自定义样式在MUI样式之后加载）生效，不需要!important强制覆盖。

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