代码之家 › 专栏 › 技术社区 › Dimitri Kopriwa

如何更改材料UI文本字段底部和标签颜色错误和焦点

material-ui ecmascript-6 reactjs javascript

Dimitri Kopriwa · 技术社区 · 6 年前

我有一个材料界面 TextField 需要一些颜色自定义的组件:

error
focused

我正在使用 @material-ui/core 3.8.1 而且它的 <TextField /> 组件。

我想避免使用 <MuiThemeProvider>

这是我根据这里对材质用户界面的建议尝试的方法 <Input /> 成分和答案 here

繁殖: https://codesandbox.io/s/q9yj0y74z6

1 回复 | 直到 6 年前

Josh Wooding 6 年前

如注释中所述,您需要重写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