title: How to use pseudo selectors in material-ui?
body: <p>I have been trying to achieve the simple thing. I was trying to show/hide my <code>&lt;TreeMenu/&gt;</code> component in the material UI v1 with pseudo selectors but somehow it does not work. Here is the code :
  CSS:</p>
  
  <pre><code>      root: {
          backgroundColor: 'white',
          '&amp;:hover': {
            backgroundColor: '#99f',
          },
        },
  
    hoverEle: {
      visibility: 'hidden',
      '&amp;:hover': {
        visibility: 'inherit',
      },
    },
        rootListItem: {
          backgroundColor: 'white',
          display: 'none',
          '&amp;:hover': {
            display: 'block',
            backgroundColor: '#99f',
          },
        },
        '@global': {
          'li &gt; div.nth-of-type(1)': {
            display: 'block !important',
            backgroundColor: "'yellow',",
          },
        },
  </code></pre>
  
  <p>The root css class works fine on the list but rootListItem or even the @global li selector does not work. I am not sure what I am doing wrong with selectors.I read the material-ui docs and says that V1 supports the pseudo selectors.</p>
  
  <p>JSX:</p>
  
  <pre><code>&lt;div&gt;
        {props.treeNode.map(node =&gt; (
          &lt;ListItem
            key={`${node.Type}|${node.NodeID}`}
            id={`${node.Type}|${node.NodeID}`}
            className={(classes.nested, classes.root)}
            button
            divider
            disableGutters={false}
            dense
            onClick={() =&gt; props.onNodeClick(node.Type, node.NodeID, node.NodeName)}
            title={props.adminUser ? node.NodeID : ''}
            onMouseOver={() =&gt; props.onMouseOver(node.Type, node.NodeID)}
          &gt;
            &lt;ListItemIcon&gt;{props.listIcon}&lt;/ListItemIcon&gt;
            &lt;ListItemText primary={node.NodeName} /&gt;
            &lt;ListItemSecondaryAction classes={{ root: classes.rootListItem }}&gt;
              &lt;TreeMenu /&gt;
            &lt;/ListItemSecondaryAction&gt;
            &lt;div className={classes.hoverEle}&gt;
              &lt;TreeMenu /&gt;
            &lt;/div&gt;
          &lt;/ListItem&gt;
        ))}
      &lt;/div&gt;
  </code></pre>
  
  <p>Please look at the <code>&lt;TreeMenu &gt;</code> component. I have applied 3 different tricks:
  1) hoverEle class with <code>'&amp;:hover'</code> selector.
  2) Tried to override the default root class of <code>&lt;ListItemSecondaryAction&gt;</code> with my class <code>rootListItem</code> 
  3) Using other pseudo selectors on li.See  <code>'li &gt; div.nth-of-type(1)':</code></p>