Question

我有一个Material UI TextField组件，该组件需要针对以下颜色进行自定义：

error
focused

我正在使用@material-ui/core 3.8.1，它是<TextField />组件。

我希望避免使用<MuiThemeProvider>

这是我根据此处对Material-UI <Input />组件和答案here的建议进行尝试的方式

复制：https://codesandbox.io/s/q9yj0y74z6

Answer 1

如注释中所述，您需要覆盖classes属性。

&$语法引用同一样式表中的类。您的示例已经差不多了，但是您需要传递一个错误类。

const styles = muiTheme => ({
  label: {
    "&$focusedLabel": {
      color: "cyan"
    },
    "&$erroredLabel": {
      color: "orange"
    }
  },
  focusedLabel: {},
  erroredLabel: {},
  underline: {
    "&$error:after": {
      borderBottomColor: "orange"
    },
    "&:after": {
      borderBottom: `2px solid cyan`
    }
  },
  error: {}
});

<TextFieldMui
      InputLabelProps={{
        classes: {
          root: classes.label,
          focused: classes.focusedLabel,
          error: classes.erroredLabel
        },
      }}
      InputProps={{
        classes: {
          root: classes.underline,
          error: classes.error
        }
      }}
      {...props}
    />

https://codesandbox.io/s/9z70kz5vnr

如何在错误和焦点上更改Material-UI TextField底部和标签颜色

1 个答案: