如何在错误和焦点上更改Material-UI TextField底部和标签颜色 [英] How to change Material-UI TextField bottom and label color on error and on focus

问题描述

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

I have a Material UI TextField component that needs some color customization for :

• error
• focused

• error
• focused

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

I am using @material-ui/core 3.8.1 and it's <TextField /> component.

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

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

This is how I have tried based on the recommendation here for the Material-UI <Input /> component and the answer here

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

推荐答案

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

As already stated in the comments, you need to override the classes property.

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

The &$ syntax refers to a class in the same stylesheet. You are nearly there with your example but you need to pass in an error class.

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底部和标签颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！