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"
/>

代码沙盒：https://codesandbox.io/s/material-demo-3xb7n

Answer 1

下面是适合你的代码 sn-p...

import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

export default function DisabledTextInput (props) {
    const disabledFlag = true;

    const theme = createMuiTheme({
       overrides: {
             MuiInputBase: {
                root: {
                    "&$disabled": {
                        color: "rgba(0, 0, 0, 0.75)"
                    }
                }
            },
        },
    });

    return (
        <ThemeProvider theme={theme}>
            <TextField
                variant="outlined"
                disabled={disabledFlag}
                ...
            />
        </ThemeProvider>
    );
}

Answer 2

我想为这个问题提供另一个答案。我在使用 InputBase 组件时发现了它，但它也适用于 TextField 和 Material UI 提供的其他输入组件。

您可以使用嵌套选择器来设置这些类型的组件的样式。创建 TextField 时，默认情况下它会在网页上创建一个 HTML 输入元素。这就是你想要的样式。

例如，如果您想在禁用 TextField 时将文本的颜色从黑色更改为灰色，您可以将其用于您的主题：

const useStyles = theme => ({
  textField: {
    '& input': {
      color: '#000000',
    },
    '& input:disabled': {
      color: '#CCCCCC',
    },
  },
});

然后，对于元素，您只需要设置它的类。不需要 InputProps。

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

Answer 3

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