为什么我不能为 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

你有两个不同的问题：

1. 您将&$disabled引用放在label类中，但是label该类应用于span按钮内的 a 而disabled该类被放置在按钮本身上，因此生成的 CSS with.MuiButton-label.Mui-disabled不会匹配任何内容。您可以通过移到&$disabled下方root而不是label.

2. 另一个问题是，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({

  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>;

}

Answer 2

Material-ui Button 有disabledcss 规则，你给它一个空对象。

以下作品：

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);