title: Hover style '&:hover:{ }' doesn't work for the button within react component
body: <p>I am working with react components these days and had some issue in styling one of my buttons with a hover style. Following is the code snippet I used in my component.</p>
  
  <pre><code>const darkTheme = createMuiTheme({
      palette: {
          type: 'dark',
          secondary:amber
      },
      typography: {
          useNextVariants: true,
      }
  });
  
  const lightTheme = createMuiTheme({
      palette: {
          type: 'light',
          secondary:amber
      },
      typography: {
          useNextVariants: true,
      }
  });
  </code></pre>
  
  <p>Above is the custom themes I am using.</p>
  
  <pre><code>class APIWidget extends Widget {
  
  constructor(props) {
      super(props);
  
      this.styles = {
          button: {
              backgroundColor: amber[500],
              '&amp;:hover': {
                  backgroundColor: amber[700],
              },
              position: 'absolute',
              bottom: 20,
              right: 20
          },
      };
  }
  
  render() {
      return (
          &lt;MuiThemeProvider theme={this.props.muiTheme.name === 'dark' ? darkTheme : lightTheme}&gt;
                  &lt;Button variant="contained" color="secondary" style={this.styles.button}&gt;
                      &lt;ArrowBack style={{marginRight:15}}/&gt;
                  Back
                  &lt;/Button&gt;
          &lt;/MuiThemeProvider&gt;
      );
  }
  }
  global.dashboard.registerWidget('APIWidget', APIWidget);
  </code></pre>
  
  <p>I am using material ui and i am importing the colors from it. My button background color works while the hover color doesn't work. 
  Can you please point out whether there is any mistake in my code or suggest any method to get the necessary hover color.
  Thanks in advance.</p>