title: how to use css in JS for nested hover styles, Material UI
body: <p>I'm using Material UI and trying to convert normal css classes into js file.</p>
  
  <pre class="lang-css prettyprint-override"><code>.nav {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  
  .navItem {
      float: left;
      flex: 1;
  }
  
  .navLink {
      color: white;
      text-decoration: none;
      display: block;
      font-size: '1 rem';
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: '0.0075em';
      opacity: 1;
      text-transform: 'none';
      min-width: 0;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  .navLink-static {
      color: white;
      text-decoration: none;
      display: block;
      font-size: '1rem';
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: '0.0075em';
      opacity: 1;
      text-transform: 'none';
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
  }
  
  .navLink:hover {
      border-bottom: 2px solid mediumvioletred;
      background: #8DB8DD;
      cursor: pointer;
  }
  
   .navLink:hover &gt; div:hover {
        border-bottom: none;
   }
  
  .navLink.active {
      font-weight: 600;
      border-radius: 0;
      border-color: transparent;
      border-bottom: 3px solid orange;
      padding-bottom: 10px;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul className={classes.nav}&gt;
      &lt;li className={classes.navItem}&gt;
          &lt;NavLink className={classes.navLink} to="/" exact&gt;
              abc
          &lt;/NavLink&gt;
      &lt;/li&gt;
      &lt;li className={classes.navItem}&gt;
          &lt;NavLink className={classes.navLink} to="/def" exact&gt;
              def
          &lt;/NavLink&gt;
      &lt;/li&gt;
      &lt;li className={classes.navItem}&gt;
          &lt;NavLink className={classes.navLink} to="/ghi"&gt;
              ghi
          &lt;/NavLink&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  </code></pre>
  
  <p>How do I convert these css styles in material ui pattern. I do not see any examples on how to set 'active' state and nested hover style for an element. More documentation related to this kind of advance scenarios helps.</p>
  
  <p>Here is how much further I've gone in converting these..</p>
  
  <pre class="lang-js prettyprint-override"><code>
  const styles = theme =&gt; ({
      nav: {
          listStyleType: 'none',
          margin: 0,
          padding: 0,
          overflow: 'hidden'
      },
      navItem: {
          float: 'left',
          flex: 1
      },
      navLink: {
          color: 'white',
          textDecoration: 'none',
          display: 'block',
          fontSize: '1rem',
          fontWeight: 500,
          lineHeight: 1.6,
          letterSpacing: '0.0075em',
          opacity: 1,
          textTransform: 'none',
          minWidth: 0,
          padding: '10px',
          marginLeft: '10px',
          marginRight: '10px',
          '&amp;:hover': {
              borderBottom: '2px solid mediumvioletred',
              background: '#8DB8DD',
              cursor: 'pointer',
              // '&amp; div': {
              //     '&amp;:hover': {
              //         borderBottom: 'none',
              //     }
              // },
              '&amp;&gt; div &amp;:hover': {
                  borderBottom: 'none',
              }
          },
          // 'div:hover': {
          //     borderBottom: 'none',
          // },
  
      },
      navLinkStatic: {
          color: 'white',
          textDecoration: 'none',
          display: 'block',
          fontSize: '1rem',
          fontWeight: 500,
          lineHeight: 1.6,
          letterSpacing: '0.0075em',
          opacity: 1,
          textTransform: 'none',
          padding: '10px',
          marginLeft: '10px',
          marginRight: '10px',
      }
  });
  
  </code></pre>
  
  <p>How can I convert this into material style 
  <strong>.navLink:hover > div:hover {</strong></p>
  
  <p>Things I have tried. </p>
  
  <pre class="lang-css prettyprint-override"><code>
  navLink: {
  
          '&amp;:hover': {
              borderBottom: '2px solid mediumvioletred',
              background: '#8DB8DD',
              cursor: 'pointer',
              // '&amp; div': {
              //     '&amp;:hover': {
              //         borderBottom: 'none',
              //     }
              // },
              // '&amp;&gt; div &amp;:hover': {
              //     borderBottom: 'none',
              // }
          },
          '&amp;:hover &gt; div:hover': {
              borderBottom: 'none'
          }
  
      },
  
  </code></pre>
  
  <p>any help is appreciated. </p>