Как применить стили к дочернему классу в JSS

Question

Я использую React, Material UI с JSS и React Router.

Я подключаюсь к <NavLink>, чтобы применить активный класс как:

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

Класс отлично добавляется к родителю, но у меня проблема с применением стиля к дочерней кнопке, если это класс. При нацеливании на элемент он работает, а не на класс.

Я рассмотрел использование вложенного JSS , но это все равно не работает. Есть идеи?

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

Answer 1

Если btn - это другой класс, определенный через JSS, то вам нужно обратиться к нему с помощью $btn.

См. эту часть документации 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);

Answer 2

Он не работает из-за имени класса ".btn", потому что корневой класс "активный" после рендеринга React не будет иметь того же имени класса, и он не сможет его найти.

просто установите {classes.btn}

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