You have identified two distinct issues:
- The placement of your
&$disabled reference within the label class is causing a problem. The label class is applied to a span inside the button, whereas the disabled class needs to be on the button itself. This results in CSS with .MuiButton-label.Mui-disabled not matching anything. To resolve this, move &$disabled under root instead of label.
- Another issue exists in the definition of the
background-image property within the linear-gradient in the root. You are only overriding the background-color, and when a background image is present, the color isn't visible. Therefore, for the disabled case, you'll need to remove the background image.
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
// The `withStyles()` higher-order component injects a `classes`
// prop utilized by the `Button` component.
const StyledButton = withStyles({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
borderRadius: 3,
border: 0,
color: "white",
height: 48,
padding: "0 30px",
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
"&$disabled": {
backgroundImage: "none",
backgroundColor: "blue",
color: "rgba(255,255,255,0.6)",
textTransform: "capitalize"
}
},
disabled: {}
})(Button);
export default function ClassesShorthand() {
return <StyledButton disabled>classes shorthand</StyledButton>;
}
https://codesandbox.io/s/disabled-button-background-veup6?fontsize=14&hidenavigation=1&theme=dark
If targeting the span within the button instead of the button itself is intentional, follow these steps (which focus on the label class as a descendant of the disabled class):
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
// The `withStyles()` higher-order component injects a `classes`
// prop used by the `Button` component.
const StyledButton = withStyles({
root: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
borderRadius: 3,
border: 0,
color: "white",
height: 48,
padding: "0 30px",
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"
},
label: {
"$disabled &": {
backgroundColor: "blue",
color: "rgba(255,255,255,0.6)",
textTransform: "capitalize"
}
},
disabled: {}
})(Button);
export default function ClassesShorthand() {
return <StyledButton disabled>classes shorthand</StyledButton>;
}
https://codesandbox.io/s/disabled-button-background-on-label-p9md4?fontsize=14&hidenavigation=1&theme=dark