reactjs - 如何在 JSS 中将样式应用于子类

Question

我正在使用 React、带有 JSS 的 Material UI 和 React Router。

我正在连接 <NavLink>应用一个事件类，例如:

<NavLink to={'/dashboard'} activeClassName={classes.active}
 <button className={classes.btn}>Link</button>
/>

该类已很好地添加到父级中，但如果它是一个类，则将样式应用到子按钮时遇到问题。当定位元素时它起作用，但不是类。

我研究过使用 nested JSS ，但这仍然不起作用。有任何想法吗？

  active: {
    '& .btn': { // This doesn't work
      backgroundColor: '#2A354F'
    },
   '& button': { // This works
      backgroundColor: '#2A354F'
    }  
  }

Answer 1

如果btn是通过JSS定义的另一个类，那么您需要使用$btn引用它。

参见this part 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);