ReactJS useStyles将替代父组件中的子组件的文本字段字体颜色
ReactJS useStyles将替代父组件中的子组件的文本字段字体颜色
提问于 2021-08-10 12:03:14
我试图从父组件中重写子文本字段组件的字体颜色，但无法做到这一点，也不确定原因。我在https://codesandbox.io/s/twilight-waterfall-3okx4?file=/src/SearchBar.js上创建了一个简单的演示项目，其中在" FieldOne.js“中定义的"fieldone”CSS类将字体颜色设置为红色，而在我导入FieldOne.js子组件的SearchBar.js中定义的"fieldoneoverride“CSS类将字体颜色设置为绿色。因为我是一个ReactJS新手，希望有人能提供一些关于我做错了什么的见解。提前感谢！
SearchBar.js代码片段
import { makeStyles } from "@material-ui/core/styles";
import FieldOne from "./FieldOne";
const useStyles = makeStyles((theme) => ({
searchbar: {
width: "calc(100% - 300px)",
height: "auto",
float: "left",
flexGrow: "1",
border: "1px solid #989586",
borderRadius: "9999px",
backgroundColor: "#fbfbf8",
margin: "0",
paddingLeft: "30px"
},
fieldoneoverride: {
color: "green !important"
}
}));
export default function SearchBar() {
const classes = useStyles();
return (
<div className={classes.searchbar}>
<FieldOne className={classes.fieldoneoverride} />
</div>
);
}```回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-10 12:08:45
首先，您需要在FieldOne中声明props className
function BasicTextFields({ className }) 然后在BasicTextFields中更新TextField的inputProps，如下所示
inputProps={{ className: `${classes.fieldone} ${className}` }}https://codesandbox.io/s/hopeful-bird-hff2i?file=/src/SearchBar.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68726479
复制相关文章
相似问题
腾讯云开发者
