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

Question

我有一个Material UI TextField组件，该组件需要一些颜色自定义：

• error
• focused

我正在使用@ material-ui / core 3.8.1 及其<TextField />组件。

我想避免不得不使用 <MuiThemeProvider>

这是我根据此处针对Material-UI <Input />组件的建议以及此处的答案进行的尝试

复制：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