无法覆盖MUI TextField组件颜色问题求助

问题代码 #

import Typography from '@mui/material/Typography';
import { FormControl, TextField, InputLabel } from '@mui/material';
import styled from '@emotion/styled';

const ModalFormControl = styled(FormControl)`
  width: 100%;
`;

const ModalTextField = styled(TextField)`
  color: red;
`
export default function App() {
  return (
    <div className="App">
      <ModalFormControl>
        <Typography>Name</Typography>
        <ModalTextField />
        <Typography>Columns</Typography>
        <ModalTextField />
      </ModalFormControl>
    </div>
  );
}

问题原因 #

直接给styled(TextField)设置color: red不会生效，是因为MUI的TextField组件内部封装了多层DOM结构，输入框的文字样式由内部的InputBase组件下的input元素控制，根组件的color样式无法穿透到内部元素，且内部元素的默认样式优先级更高。

解决方案 #

通过后代选择器定位到TextField内部的输入框元素，修改其颜色：

import Typography from '@mui/material/Typography';
import { FormControl, TextField, InputLabel } from '@mui/material';
import styled from '@emotion/styled';

const ModalFormControl = styled(FormControl)`
  width: 100%;
`;

// 针对TextField内部的输入框元素设置样式
const ModalTextField = styled(TextField)`
  & .MuiInputBase-input {
    color: red;
  }
`
export default function App() {
  return (
    <div className="App">
      <ModalFormControl>
        <Typography>Name</Typography>
        <ModalTextField />
        <Typography>Columns</Typography>
        <ModalTextField />
      </ModalFormControl>
    </div>
  );
}

如果需要同时修改输入框的提示文字（placeholder）颜色，可以补充：

& .MuiInputBase-input::placeholder {
  color: rgba(255, 0, 0, 0.6);
}

补充说明 #

你可以通过浏览器开发者工具查看TextField的DOM结构，找到对应元素的类名（比如MuiInputBase-input），这样就能精准定位需要修改的样式元素。

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