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

Question

我有一个 Material UITextField组件，它需要一些颜色自定义：

• error
• focused

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

我想避免使用<MuiThemeProvider>

这就是我根据这里对 Material-UI 组件的推荐和这里<Input />的答案所尝试的方法

转载：https ://codesandbox.io/s/q9yj0y74z6

标签： javascriptreactjsecmascript-6material-ui

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