问题描述
我正在使用 React、带有 JSS 和 React Router 的 Material UI.
我正在使用
来应用一个活动类,例如:
<NavLink to={'/dashboard'} activeClassName={classes.active}<button className={classes.btn}>链接</button>/>
该类正在被很好地添加到父级,但是如果它是一个类,我在将样式应用于子按钮时遇到问题.当定位它工作的元素时,而不是类.
我已经研究过使用
I'm using React, Material UI with JSS and React Router.
I'm hooking in to <NavLink>
to apply an active class like:
<NavLink to={'/dashboard'} activeClassName={classes.active}
<button className={classes.btn}>Link</button>
/>
The class is being added fine to the parent, but I'm having an issue applying the style to the child button if it's a class. When targeting the element it works, just not the class.
I've looked into using nested JSS, but this still does not work. Any ideas?
active: {
'& .btn': { // This doesn't work
backgroundColor: '#2A354F'
},
'& button': { // This works
backgroundColor: '#2A354F'
}
}
解决方案
If btn
is another class defined via JSS, then you need to refer to it using $btn
.
See this part of the JSS documentation.
Here's some sample code that works:
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);
这篇关于如何将样式应用于 JSS 中的子类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论