title: Advanced styling in material-ui
body: <p>I start to study material-ui and create a simple app in the SandBox:  <a href="https://codesandbox.io/s/eager-ride-cmkrc" rel="nofollow noreferrer">https://codesandbox.io/s/eager-ride-cmkrc</a></p>
  
  <p>The style of jss is unusual for me, but if you help me with these two simple exercises, then I will understand everything.</p>
  
  <p>First: I want union common properties of <code>ButtonLeft</code> and <code>ButtonRight</code> into new class and extend it: (<a href="https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object" rel="nofollow noreferrer">https://github.com/cssinjs/jss-extend#use-rule-name-from-the-current-styles-object</a>)</p>
  
  <pre><code>ButtonControll: {
      display: "none",
      position: "absolute",
      fontSize: "24px"
  },
  ButtonLeft: {
      extend: 'ButtonControll',
      left: "0",
  },
  ButtonRight: {
      extend: 'ButtonControll',
      right: "0",
  }
  </code></pre>
  
  <p>But it's doesn't work =(</p>
  
  <p>Second: I want the arrows to appear when you hover over the container, so I wrote this:</p>
  
  <pre><code>"&amp;:hover .MuiIconButton-root": {
      display: "block"
  }
  </code></pre>
  
  <p>Problem: <code>MuiIconButton-root</code> it is base className for all IconButtons? but I want something like this:</p>
  
  <pre><code>"&amp;:hover ButtonLeft": {
      display: "block",
      backgroundColor: 'red' 
  },
  "&amp;:hover ButtonRight": {
      display: "block",
      fontSize: '50px' 
  }
  </code></pre>
  
  <p>Please, help me with these two simple tasks and then I will understand everything =)</p>