覆盖材质 UI 中的文本字段颜色答案

【问题标题】：Overriding TextField color in MaterialUI覆盖材质 UI 中的文本字段颜色
【发布时间】：2019-10-04 16:49:26
【问题描述】：

我正在尝试让边框颜色从默认的紫色变为白色。

这是我目前所拥有的：

    const useStyles = makeStyles(theme => ({
        darkModeColorInput: {
            color: WHITE
        },
        darkModeColorLabel: {
            color: WHITE,
            "&:after": {
                borderColor: WHITE
            }
        }
    }));

    <TextField
    margin="normal"
    inputProps={{
        className: classes.darkModeColorInput
    }}
    InputLabelProps={{
        className: classes.darkModeColorLabel
    }}
    required
    fullWidth
    id="email"
    label="handle or email"
    name="email"
    autoComplete="email"
    autoFocus
    color={WHITE}
    />

这呈现：

标签也会从白色切换到默认的紫色焦点。我在这里做错了什么？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

最简单的方法是通过ThemeProvider 使用深色主题：

import { ThemeProvider } from '@material-ui/styles';
import { createMuiTheme } from '@material-ui/core/styles';

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

<ThemeProvider theme={darkTheme}>
   <Component />
</ThemeProvider>

然后，您将获得所有 Material UI 组件的主题，该主题将在深色背景上正确显示。

如果您仍想完全控制外观（并且不想使用主题），您需要在 TextInput (https://material-ui.com/api/text-field/) 上为 InputLabelProps 和 InputProps 设置自定义样式。

【讨论】：

我是在 App.js 中还是在每个单独的组件 .js 中使用这个包装器？
您需要在要切换到暗模式的级别上使用它。 App.js 可以正常工作。