React Material UI: How to give a button a custom color when disabled?

Question

I\'m building a React App using Material UI.

If the button is disabled, it is grey and opaque. I\'d like it to be in my themes primary color and opaque.

So here

Answer 1

You can define a class to be applied for disabled buttons:

const styles = theme => ({
  disabledButton: {
    backgroundColor: theme.palette.primary || 'red'
  }
});

And then, use it like this:

<Button
  variant="contained"
  color="secondary"
  disabled
  classes={{ disabled: classes.disabledButton }}
>
  Disabled
</Button>

You can find in the documentation all the classes that you can override.

Answer 2

Neps answer is correct, but I will add more details.

First of all you should import createMuiTheme and ThemeProvider:

import { createMuiTheme } from '@material-ui/core/styles'
import { ThemeProvider } from '@material-ui/styles';

Create theme:

const theme = createMuiTheme({
  palette: {
    action: {
      disabledBackground: 'set color of background here',
      disabled: 'set color of text here'
    }
  }
});

And wrap your button:

<ThemeProvider theme={theme}>
  <Button color="primary">Primary</Button>
</ThemeProvider>

Answer 3

Or you can try createMuiTheme and customize the following property:

import { createMuiTheme } from '@material-ui/core/styles'

const theme = createMuiTheme({
  palette: {
    action: {
      disabledBackground: 'set color of background here',
      disabled: 'set color of text here'
    }
  }
}