材质UI的makeStyles覆盖类属性，当它是在其他类

Question

我在react-router-dom中使用NavLink与activeClassName。在NavLink中，我有listtitemesfrommaterialui它有一些css。我想改变css如果那个NavLink被分配了活动类

我知道我不能引用abc为"&abc"因为makeStyle会为它创建动态名称。这就是我被困住的地方。有人能帮我解决这个问题吗?

这是我正在尝试的代码:

const useStyles = makeStyles((theme) => ({
abc: {
color: "white",
},
xyz: {
"& abc": {
color: "red"
}
}
}

<List>
{pages.map((key) => {
let Component = key.icon;
return (
<NavLink
activeClassName={classes.xyz}
to={key.to}
onClick={() => setActive(key.to)}
>
<ListItem className={classes.abc}>
<ListItemIcon className={classes.abc}>
<Component />
</ListItemIcon>
<ListItemText
primary={key.label}
className="navText"
></ListItemText>
</ListItem>
</NavLink>
);
})}
</List>

提前感谢。

Answer 1

使用$解决了我的问题。

const useStyles = makeStyles((theme) => ({
abc: {
color: "white",
},
xyz: {
"& $abc": {
color: "red"
}
}
}

从文档中得到这个解决方案。谢谢你！

Answer 2

abc是class，所以你需要添加.

xyz: {
"& .abc": {
color: "red"
}
}

将xyz中的className={classes.abc}改为className="abc"