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

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

我迷上了<NavLink>以应用一个 Activity 类，如:

<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'
    }
  }

最佳答案

如果btn是通过JSS定义的另一个类，则需要使用$btn进行引用。

请参阅JSS文档的this part。

这是一些有效的示例代码:

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);

关于reactjs - 如何在JSS中将样式应用于子类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54184180/