reactjs - 材质界面 | 如何更改禁用的输入文本字段的字体颜色？

Question

使用材质 UI 创建的禁用输入文本字段的颜色默认为浅灰色，在白色背景下不太明显。有没有办法改变禁用的输入文本字段的字体颜色？

标签： reactjsmaterial-ui

Answer 1

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

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"
      />
    </>
  );
}