title: How to keep the background color of disabled Button in Material-UI?
body: <p>I want to change the global style of the disabled <code>Button</code> component from <code>Material-UI</code>. But the problem is I am unable to keep the original color scheme of the button.</p>
  <p>Consider this button:</p>
  <pre><code>&lt;Button color=&quot;secondary&quot; disabled={isLoading}&gt;Create Account&lt;/Button&gt;
  </code></pre>
  <p>Now by default <code>Mui-disabled</code> would be attached to this button. Whose  <code>color</code> and the <code>background-color</code> are taken from <code>theme.palatte.action</code> property. So this disabled button would be having CSS as:</p>
  <pre><code>color: rgba(0,0,0,0.26);
  box-shadow: none;
  background-color: rgba(0,0,0,0.12);
  </code></pre>
  <p>But I want my disabled button to maintain its original color (&quot;primary, secondary&quot;, &quot;error&quot; etc.) added with an opacity of <code>0.7</code>. By default, the cursor events are set to none by MUI.</p>
  <p>I tried it using the custom theme but I don't know how to maintain the original color of the button. E.g if the <code>Button</code> is <code>primary</code> keep the primary color, if the <code>Button</code> is <code>secondary</code> keep the secondary colors.</p>
  <pre><code>    MuiButton: {
          styleOverrides: {
              root: {
                  textTransform: &quot;none&quot;,
                  boxShadow: &quot;none&quot;,
                  &quot;&amp;.Mui-disabled&quot;: {
                      // background: &quot;initial&quot;,
                      // color: &quot;initial&quot;,
                      opacity: .7
                  }
              },
          }
      }
  </code></pre>
  <p>Of course, I don't want to write a custom code for each code. I can do this even by creating a wrapper around the MUI's button and use that wrapper everywhere in my code.
  But I want to do it the MUI way by overriding the theme.</p>
  <p>How can I implement a global solution?</p>