如何将样式应用于 JSS 中的子类答案

【问题标题】：How to apply styles to a child class in JSS如何将样式应用于 JSS 中的子类
【发布时间】：2019-06-08 14:22:06
【问题描述】：

我正在使用 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'
    }  
  }

【问题讨论】：

编译后的 CSS 是什么样子的？

标签： reactjs react-router material-ui jss

【解决方案1】：

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

【讨论】：

谢谢瑞恩。就是这样。

【解决方案2】：

由于类名“.btn”，它不起作用，因为React渲染后的根类“活动”将不会有相同的类名，并且无法找到它。

只需设置 {classes.btn}

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

【讨论】：

谢谢，但我刚刚忘记将那部分代码添加到演示中。现已更新。