title: How to disable the hover effect of material-ui button inside of a styled component
body: <p>I added the css hover property to disable the button's hover effect, but it seems not work for my case, how should I fix this?</p>
  
  <pre><code>import Button from 'material-ui/Button'
  import styled from 'styled-components'
  
  const StyledButton = styled(Button)`
    &amp;:hover {
      background: none;
    }
  `
  export const SubmitButton = ({ onClick }) =&gt; {
    return (
      &lt;StyledButton
        variant="raised"
        onClick={onClick}&gt;
        login
      &lt;/StyledButton&gt;
    )
  }
  </code></pre>