为什么我不能为 Material-UI 中禁用的元素自定义类？答案

【问题标题】：Why can't I customize classes for an element that is disabled in Material-UI?为什么我不能为 Material-UI 中禁用的元素自定义类？
【发布时间】：2020-03-22 23:01:28
【问题描述】：

我正在使用 Material-UI 来设置组件的样式，但是当按钮被禁用时，我无法自定义标签类。我正在设置参考“&$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", textTransform: "capitalize" }
  },
  disabled: {}
})(Button);

export default function ClassesShorthand() {
  return <StyledButton disabled>classes shorthand</StyledButton>;
}

这里是codesandbox的链接：https://codesandbox.io/s/material-demo-7s9u3

【问题讨论】：

标签： javascript css reactjs button material-ui

【解决方案1】：

Material-ui Button 有disabled css 规则，你给了它一个空对象。
以下作品：

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: { background: "blue", textTransform: "capitalize" }
})(Button);

【讨论】：

在您的沙箱中，没有显示蓝色背景色（仍然显示线性渐变）。
@RyanCogswell 你是对的，谢谢。我通过覆盖背景属性来修复它。

【解决方案2】：

您有两个不同的问题：

您将&$disabled 引用放在label 类中，但label 类应用于按钮内的span，而disabled 类放置在按钮本身上，因此生成的CSS .MuiButton-label.Mui-disabled 不会匹配任何东西。您可以通过将&$disabled 移动到root 而不是label 下来解决此问题。
另一个问题是，在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>;
}

如果您有意以按钮内的跨度而不是按钮本身为目标，您可以执行以下操作（将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>;
}

【讨论】：