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

Question

我正在使用 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>;

}

这是关于代码沙盒的链接： https ://codesandbox.io/s/material-demo-7s9u3

Answer 1

你有两个不同的问题：您将&$disabled引用放在label类中，但是label该类应用于span按钮内的 a 而disabled该类被放置在按钮本身上，因此生成的 CSS with.MuiButton-label.Mui-disabled不会匹配任何内容。您可以通过移到&$disabled下方root而不是label.另一个问题是，root您通过 指定background-image属性linear-gradient，但您只是覆盖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({&nbsp; root: {&nbsp; &nbsp; background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",&nbsp; &nbsp; borderRadius: 3,&nbsp; &nbsp; border: 0,&nbsp; &nbsp; color: "white",&nbsp; &nbsp; height: 48,&nbsp; &nbsp; padding: "0 30px",&nbsp; &nbsp; boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",&nbsp; &nbsp; "&$disabled": {&nbsp; &nbsp; &nbsp; backgroundImage: "none",&nbsp; &nbsp; &nbsp; backgroundColor: "blue",&nbsp; &nbsp; &nbsp; color: "rgba(255,255,255,0.6)",&nbsp; &nbsp; &nbsp; textTransform: "capitalize"&nbsp; &nbsp; }&nbsp; },&nbsp; disabled: {}})(Button);export default function ClassesShorthand() {&nbsp; 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({&nbsp; root: {&nbsp; &nbsp; background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",&nbsp; &nbsp; borderRadius: 3,&nbsp; &nbsp; border: 0,&nbsp; &nbsp; color: "white",&nbsp; &nbsp; height: 48,&nbsp; &nbsp; padding: "0 30px",&nbsp; &nbsp; boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"&nbsp; },&nbsp; label: {&nbsp; &nbsp; "$disabled &": {&nbsp; &nbsp; &nbsp; backgroundColor: "blue",&nbsp; &nbsp; &nbsp; color: "rgba(255,255,255,0.6)",&nbsp; &nbsp; &nbsp; textTransform: "capitalize"&nbsp; &nbsp; }&nbsp; },&nbsp; disabled: {}})(Button);export default function ClassesShorthand() {&nbsp; return <StyledButton disabled>classes shorthand</StyledButton>;}

Answer 2

Material-ui Button 有disabledcss 规则，你给它一个空对象。以下作品：const StyledButton = withStyles({&nbsp; root: {&nbsp; &nbsp; background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",&nbsp; &nbsp; borderRadius: 3,&nbsp; &nbsp; border: 0,&nbsp; &nbsp; color: "white",&nbsp; &nbsp; height: 48,&nbsp; &nbsp; padding: "0 30px",&nbsp; &nbsp; boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)"&nbsp; },&nbsp; disabled: { background: "blue", textTransform: "capitalize" }})(Button);