我正在使用 React、带有 JSS 和 React Router 的 Material UI。
我正在<NavLink>应用一个活动类，如：
<NavLink to={'/dashboard'} activeClassName={classes.active}
<button className={classes.btn}>Link</button>
/>
该类正在被很好地添加到父级，但是如果它是一个类，我在将样式应用于子按钮时遇到问题。当针对它工作的元素时，而不是类。
我已经研究过使用嵌套的 JSS，但这仍然不起作用。有任何想法吗？
active: {
'& .btn': { // This doesn't work
backgroundColor: '#2A354F'
},
'& button': { // This works
backgroundColor: '#2A354F'
}
}
如果btn是通过 JSS 定义的另一个类，那么您需要使用$btn.
请参阅JSS 文档的这一部分。
这是一些有效的示例代码：
import React from "react";
import ReactDOM from "react-dom";
import { NavLink, BrowserRouter } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles";
const styles = {
btn: {},
active: {
"& $btn": {
backgroundColor: "#2A354F",
color: "#fff"
}
}
};
function App(props) {
return (
<BrowserRouter>
<div className="App">
<NavLink to="/" activeClassName={props.classes.active}>
<button className={props.classes.btn}>Link</button>
</NavLink>
</div>
</BrowserRouter>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
由于类名“.btn”，它不起作用，因为React渲染后的根类“active”将不具有相同的类名并且无法找到它。
只需设置 {classes.btn}
<button className={classes.btn}>Link</button>