score:9

Accepted answer

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.

score:0

I was using Styled-Components in my project so I used that as follows:

import styled from "styled-components"
import { Button } from '@material-ui/core';

const MyButton = styled(Button)`
  &&& {
    &.Mui-disabled {
      color: #fff;
      background: #000;
    }
  }
`;

<MyButton>I am styled button</MyButton>

score:5

You can add styling to buttons disabled class like:

.Mui-disabled { background-color: blue; }

You can also see what other classes you can use to style button on https://material-ui.com/api/button/

score:6

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>

score:7

Ran into the same issue and managed to solve it by changing :disabled to &:disabled.

    const styles = theme => ({
      button: {
        "&:disabled": {
          backgroundColor: theme.palette.primary || 'red'
        }
      }
    });

score:27

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'
    }
  }
}

Related Query

More Query from same tag