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

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

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

材质UI-覆盖InputBase的禁用样式

2 个答案: