How to apply styles to a child class in JSS

Question

I\'m using React, Material UI with JSS and React Router.

I\'m hooking in to to apply an active class like:

Answer 1

If btn is another class defined via JSS, then you need to refer to it using $btn.

See this part of the JSS documentation.

Here's some sample code that works:

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

Answer 2

It does not work due to class name ".btn" because the root class "active" after rendering of React will not have the same class name and it cannot found out it.

just set {classes.btn}

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