如何在react中使用makestyles来正确获得myclass.h1之类的东西

Question

我正在尝试在我的React应用程序中使用useStyles。我想要实现的是让className中元素的样式发挥作用。你能暗示一下吗？我的代码在下面。感谢：]

在CSS中，您通常会使用类似的东西

.myClass {
color: red;
}
.myClass.h1 {
color: blue
}
...
...
<div class="myClass">
<span>this is red text</span>
<h1>this is blue text</div>
</div>

我实际的反应代码是这样的：

const useStyles = makeStyles((theme) => ({  
myClass: {
color: "red",
h1: {
color: "blue",
}
}
}
...
...
const classes = useStyles();
return (
<div className={classes.myClass}>  
<span>this is red text</span>
<h1>this is blue text</h1>
</div>
)

Answer 1

所以解决方案是

myClass: {
color: "blue",  
"& > h1": {
color: "red",
},
},