title: Using material ui createStyles
body: <p>I'm trying to transform my css from a less file to material createStyles and i can't get my head around how it works.</p>
  
  <p>I understand the basics of the createstyles but i can't my child selector working</p>
  
  <p>All i want is to be able to access the css class missionStatusLibelle</p>
  
  <pre><code>.missionStatus {
    display: flex;
    align-items: center;
    height: 34px;
    width: 100%;
  
    .missionStatusLibelle {
      align-items: flex-start;
      justify-content: flex-start;
      margin-left: 10px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
    }
  
  }
  </code></pre>
  
  <p>like</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div className={styles.missionStatusLibelle}&gt;
  </code></pre>
  
  <p>And transform it into something like this </p>
  
  <pre class="lang-js prettyprint-override"><code>const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      missionStatus: {
        display: "flex",
        alignItems: "center",
        height: "34px",
        width: "100%",
  
        missionStatusLibelle: {
          alignItems: "flex-start",
          justifyContent: "flex-start",
          marginLeft: "10px",
          fontSize: "14px",
          fontWeight: 500,
          lineHeight: "20px"
        }
      }
  }));
  </code></pre>
  
  <p>But i can't get to missionStatusLibelle apart from using pseudo-selectors.</p>
  
  <pre><code>const styles = useStyles();
  &lt;div className={styles.missionStatusLibelle}&gt;
  
  </code></pre>