如何在Material UI中修改多行TextField的字体颜色？

这个问题我之前也碰到过！Material UI的TextField组件内部有多层嵌套结构，你直接给根元素的textfield类设置color: green并不会作用到实际的输入文本上——因为输入框的文本样式是由内部的MuiInputBase-input元素控制的，它的样式优先级比根元素更高。

下面给你几种靠谱的解决方案，根据你使用的Material UI版本选择就行：

方案1：使用Material UI v4的makeStyles（类组件也可以用withStyles） #

通过makeStyles创建样式时，直接嵌套选择器定位到内部的输入元素：

import { TextField, makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
  textfield: {
    backgroundColor: '#000',
    // 定位到多行输入框的文本元素
    '& .MuiInputBase-input': {
      color: 'green',
    },
    // 如果需要修改标签(label)的颜色，可以加上这部分
    '& .MuiInputLabel-root': {
      color: 'green',
    },
    // 可选：聚焦时的文本颜色也可以单独设置
    '&.Mui-focused .MuiInputBase-input': {
      color: 'lightgreen',
    },
  },
});

function YourComponent() {
  const classes = useStyles();
  return (
    <TextField 
      className={classes.textfield} 
      fullWidth 
      multiline 
      label="Debugger" 
      rows="10" 
      margin="normal"
    />
  );
}

方案2：使用Material UI v5+的sx属性（推荐） #

v5版本的Material UI推荐用sx属性来写内联样式，它支持嵌套选择器，写法更简洁：

import TextField from '@mui/material/TextField';

function YourComponent() {
  return (
    <TextField 
      sx={{
        backgroundColor: '#000',
        '& .MuiInputBase-input': {
          color: 'green',
        },
        '& .MuiInputLabel-root': {
          color: 'green',
        },
      }}
      fullWidth 
      multiline 
      label="Debugger" 
      rows="10" 
      margin="normal"
    />
  );
}

方案3：全局CSS（不推荐，但如果必须用的话） #

如果你坚持用全局CSS文件，需要提高选择器的优先级，直接选中内部的输入元素：

.textfield {
  background-color: #000;
}
/* 精准定位输入文本元素 */
.textfield .MuiInputBase-input {
  color: green;
}
/* 可选：修改标签颜色 */
.textfield .MuiInputLabel-root {
  color: green;
}

原理其实很简单：TextField的输入文本是渲染在内部的<input>或<textarea>元素上的，这些元素被Material UI赋予了MuiInputBase-input类名，只有直接给这个类设置颜色，才能覆盖默认样式。

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