Материал интерфейса | Как изменить цвет шрифта отключенного поля ввода текста?

Question

Цвет отключенного поля ввода текста, созданного с помощью пользовательского интерфейса материала, по умолчанию светло-серый, и он не очень хорошо виден на белом фоне. Есть ли способ изменить цвет шрифта отключенного поля ввода текста?

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