title: Simple selector and nested selector in JSS
body: <p>I'm currently training on ReactJS. I'm using material-ui and JSS (totally new for me).</p>
  
  <p>I don't understand how can I simply select my H6 element or my H6 children elements (dangerStyle).</p>
  
  <p>Any idea ? </p>
  
  <p>Thanks !</p>
  
  <p>myJss.js</p>
  
  <pre><code>const myJss = theme =&gt; ({
      textCenter : {
          textAlign:'center'
      },
      dangerStyle: {
          fontWeight:'normal',
          color:"#FF0000"
      },
      h6: {
          color:"#00FF00",
          "&amp;.dangerStyle" : {
              fontWeight:'bold',
          }
      }
  
  });
  export default myJss;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { withStyles } from "@material-ui/core/styles";
  import Danger from 'components/danger'
  import myJss from 'assets/jss/myJss.js';
  
  class App extends Component {
  
      constructor (props) {
          super(props)
      }
  
      render () {
          const { classes } = this.props;
          return (
              &lt;div&gt;
                  APP
                  &lt;h6&gt;
                      &lt;Danger&gt;Error occured&lt;/Danger&gt;
                  &lt;/h6&gt;
              &lt;/div&gt;
          )
      }
  }
  export default withStyles(myJss)(App)
  </code></pre>
  
  <p>danger.js</p>
  
  <pre><code>import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import myJss from 'assets/jss/myJss.js';
  const useStyles = makeStyles(myJss);
  
  export default function Danger(props) {
      const { children } = props;
      const classes = useStyles();
      return (
          &lt;div className={classes.dangerStyle}&gt;
              {children}
          &lt;/div&gt;
      );
  }
  </code></pre>