如何在 JSS 中将样式应用于子项 class

Question

我正在使用 React，Material UI 与 JSS 和 React Router。

我正在连接到 <NavLink> 以应用一个活跃的 class，例如：

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

class 可以很好地添加到父按钮，但如果它是 class，我在将样式应用于子按钮时遇到问题。当定位它起作用的元素时，而不是 class.

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

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

Answer 1

由于 class 名称“.btn”，它不起作用，因为 React 渲染后的根 class "active" 将不具有相同的 class 名称和它找不到它。

只需设置{classes.btn}

<button className={classes.btn}>Link</button>

Answer 2

如果 btn 是另一个通过 JSS 定义的 class，那么您需要使用 $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);

如何在 JSS 中将样式应用于子项 class

How to apply styles to a child class in JSS

reactjs

react-router

material-ui

jss