Simple selector and nested selector in JSS

Each key in your styles object is going to be used to generate a CSS class. A key like h6 does not target the h6 tag, it just allows you to reference classes.h6 as a class similar to classes.dangerStyle.

In order to have the dangerStyle class behave differently when nested within an h6 tag, you can do something like the following:

Danger.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  dangerStyle: {
    fontWeight: "normal",
    color: "#FF0000",
    "h6 &": {
      color: "#00FF00",
      fontWeight: "bold",
      fontSize: 24
    }
  }
});

export default function Danger(props) {
  const { children } = props;
  const classes = useStyles();
  return <div className={classes.dangerStyle}>{children}</div>;
}

index.js

import React from "react";
import ReactDOM from "react-dom";

import Danger from "./Danger";
function App() {
  return (
    <div className="App">
      <Danger>Danger not in h6</Danger>
      <h6>
        <Danger>Danger in h6</Danger>
      </h6>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Related answers and documentation:

• jss-plugin-nested documentation
• Using material ui createStyles
• Advanced styling in material-ui
• In Material UI, How can I override a selector selected component style?
• how to use css in JS for nested hover styles, Material UI
• Using createMuiTheme to override default styles on div's, p's, body