title: MUI Button hover background color and text color
body: <p>I have created an <code>Appbar</code> component in React.js with 3 buttons in it but I would like to change the color when I hover over those buttons. The background color is <code>#3c52b2</code> and the text color is <code>#fff</code>. I would like the background color and text color exchange when I hover over the button.</p>
  <p>I've tried the code below but still not working.</p>
  <pre class="lang-js prettyprint-override"><code>Button: {
    '&amp;:hover': {
      backgroundColor: '#ffffff',
      boxShadow: 'none',
    },
    '&amp;:active': {
      boxShadow: 'none',
      backgroundColor: '#3c52b2',
    },
  },
  </code></pre>