代码之家 › 专栏 › 技术社区 › Paul Redmond

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

jss material-ui react-router reactjs

0

Paul Redmond · 技术社区 · 7 年前

我使用的是React、Material UI和JSS以及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'
    }  
  }

2 回复 | 直到 7 年前

1

2

Ryan Cogswell 7 年前

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

2

0

Evgeny Skarlat 7 年前

由于类名“.btn”,它不起作用,因为react呈现后的根类“active”将不具有相同的类名,并且找不到它。

只需设置类。btn

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