Как применить стили к дочернему классу в JSS
Я использую React, Material UI с JSS и React Router.
Я цепляюсь за <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'
}
}
2 ответа
Решение
Если 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 не будет иметь того же имени класса и не сможет его обнаружить.
просто установите {classes.btn}
<button className={classes.btn}>Link</button>