材质界面 |如何更改禁用的输入文本字段的字体颜色? [英] Material UI | How to change the font colour of a disabled input text field?

问题描述

使用材质UI创建的禁用输入文本字段的颜色默认情况下为浅灰色，并且在白色背景下不太明显.有什么方法可以更改禁用的输入文本字段的字体颜色?

The colour of a disabled input text field created using material UI is light grey by default and it is not very visible against a white background. Is there any way to change the font colour of a disabled input text field?

推荐答案

以下是如何执行此操作的示例，该示例显示默认样式旁边的自定义版本.

Below is an example of how to do this showing the customized version next to the default styling.

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const DarkerDisabledTextField = withStyles({
  root: {
    marginRight: 8,
    "& .MuiInputBase-root.Mui-disabled": {
      color: "rgba(0, 0, 0, 0.6)" // (default alpha is 0.38)
    }
  }
})(TextField);

export default function Demo() {
  const [disabled, setDisabled] = React.useState(true);
  return (
    <>
      <Button onClick={() => setDisabled(!disabled)}>Toggle Disabled</Button>
      <br />
      <br />
      <DarkerDisabledTextField
        disabled={disabled}
        id="outlined-basic"
        label="Custom"
        value={`Disabled = ${disabled}`}
        variant="outlined"
      />
      <TextField
        disabled={disabled}
        id="outlined-basic"
        label="Default"
        value={`Disabled = ${disabled}`}
        variant="outlined"
      />
    </>
  );
}

这篇关于材质界面 |如何更改禁用的输入文本字段的字体颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！