reactjs - 如何通过 createMuiTheme 更改 Material-UI TextField/Select 错误颜色？

Question

我的应用程序中有一个自定义输入样式，用于文本字段和选择，并由ThemeProvider. 主题文件如下所示：

...
overrides: {
    MuiInput: {
      input: {
        color: '#404040',
        background: 'white',
        fontSize: '14px',
        borderColor: '#c0c0c0',
        borderStyle: 'solid',
        borderWidth: '1.5px',
        borderRadius: '4px',
        paddingLeft: '10px',
        paddingTop: '10px',
        paddingBottom: '10px',
        '&:hover': {
          borderColor: blue[900],
        },
        '&:focus': {
          borderRadius: '4px',
          background: 'white',
          backgroundColor: 'white',
          borderColor: blue[900],
        },
      },
    },
    ...
},

我能够在焦点和悬停时编辑样式，但是当错误属性处于活动状态时我无法编辑组件。我的目标是在这种情况下显示红色边框。

您对如何使用 createMuiTheme 和覆盖有任何建议吗？如果不可能，如果您有使用任何其他样式选项的解决方案，我也会很高兴。

标签： reactjsmaterial-ui

Answer 1

TextField用于FormHelperText在TextField. 当errorprops 设置为true. 默认情况下，错误消息颜色为theme.palette.error.main。所以这就是你如何覆盖错误颜色：

const theme = createMuiTheme({
  palette: {
    error: {
      main: "#ff00ff", // change the error color to pink
    }
  }
});

<ThemeProvider theme={theme}>
  <TextField
    label="Outlined"
    variant="outlined"
    error
    helperText="My error message"
  />
</ThemeProvider>

现场演示