You have two separate issues:(您有两个单独的问题：)
You put your &$disabled reference within the label class, but the label class is applied to a span within the button whereas the disabled class is placed on the button itself, so the resulting CSS with .MuiButton-label.Mui-disabled won't match anything.(你把你的&$disabled的范围内引用label类，但label类适用于span ，而在按钮中disabled类被放置在按钮本身，因此与所产生的CSS .MuiButton-label.Mui-disabled韩元”不匹配任何东西。) You can fix this by moving &$disabled under root instead of label .(您可以通过在root下而不是label下移动&$disabled来解决此问题。)
The other issue is that in root you are specifying a background-image property via the linear-gradient , but you are only overriding background-color and the background color isn't shown when a background image is present, so for the disabled case you need to remove the background image.(另一个问题是，在root您是通过linear-gradient指定一个background-image属性，但是您仅覆盖background-color并且当存在背景图像时不会显示背景色，因此对于禁用情况，您可以需要删除背景图片。)
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
// The `withStyles()` higher-order component is injecting a `classes`
// prop that is 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)",
"&$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>;
}
If you are intentionally wanting to target the span within the button rather than the button itself, you can do the following (which targets the label class as a descendant of the disabled class):(如果您有意要定位按钮内的跨度而不是按钮本身，则可以执行以下操作（将label类定位为disabled类的后代）：)
import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
// The `withStyles()` higher-order component is injecting a `classes`
// prop that is 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>;
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
