Material UI - 覆盖 InputBase 的禁用样式

Question

我似乎找不到一种方法来覆盖以下规则InputBase：

.MuiInputBase-root.Mui-disabled {
    color: rgba(0, 0, 0, 0.38);
}

我要应用的规则是：color: "rgba(0, 0, 0, 0.75)"

我尝试过使用类名和类，但没有任何效果。有任何想法吗？

textField: {
  marginLeft: theme.spacing(1),
  marginRight: theme.spacing(1),
  '&:disabled': {
    color: "rgba(0, 0, 0, 0.75)"
  }    
},
disabled: {
  color: "rgba(0, 0, 0, 0.75)",
  '&:disabled': {
    color: "rgba(0, 0, 0, 0.75)"
  }
}

<TextField
  disabled
  id="outlined-disabled"
  label="Disabled"
  defaultValue="Hello World"
  className={classes.textField}
  classes={{
    root: classes.disabled,
    disabled: classes.disabled
  }}
  margin="normal"
  variant="outlined"
/>

Codesandbox：https://codesandbox.io/s/material-demo-3xb7n

Answer 1

TextField不支持禁用的规则名称。您需要向 TextField 提供 InputProps，然后您可以在其中提供禁用的规则名称：

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

const useStyles = makeStyles(theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  },
  inputRoot: {
    '&$disabled': {
      color:'red'
    },
  },
  disabled: {}
}));

export default function OutlinedTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        disabled
        id="outlined-disabled"
        label="Disabled"
        defaultValue="Hello World"
        InputProps={{
          classes:{
            root: classes.inputRoot,
            disabled: classes.disabled
          }
        }}
        margin="normal"
        variant="outlined"
      />
    </form>
  );
}