ReactJS中如何通过父组件useStyles覆盖子组件TextField的字体颜色？

问题根因 #

• 子组件FieldOne没有接收父组件传递的className属性，也没有将该属性挂载到对应文本字段节点上，你定义的fieldoneoverride样式类根本没有生效的目标载体
• Material UI的TextField组件的文本样式是作用在内部.MuiInputBase-input子节点上，直接给组件根节点设置color属性无法继承到输入框文本上，优先级也低于组件内置样式

解决方案 #

1. 改造子组件接收并合并传入的className #

修改FieldOne.js代码，接收父组件传入的className参数，和自身的样式类合并后挂载到TextField上：

import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles(() => ({
  fieldone: {
    color: "red"
  }
}));

// 新增接收className props
export default function FieldOne({ className }) {
  const classes = useStyles();
  // 合并类名，后写的类名优先级更高
  return <TextField className={`${classes.fieldone} ${className}`} />;
}

2. 修改父组件覆盖样式的选择器 #

调整SearchBar.js里的fieldoneoverride样式，明确选中TextField内部的输入文本节点：

const useStyles = makeStyles((theme) => ({
  // 原有其他样式保持不变
  fieldoneoverride: {
    "& .MuiInputBase-input": {
      color: "green !important"
    }
  }
}));

做完以上两步修改后，父组件定义的绿色字体样式就会覆盖子组件的红色样式生效。

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