Переопределение цвета TextField в MaterialUI

Question

Я пытаюсь изменить цвет границы с фиолетового на белый по умолчанию.

Вот что у меня есть:

    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}
    />

Это делает:

Метка также переключается с белого на фиолетовый по умолчанию в фокусе. Что я тут не так делаю?

Answer 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>

Затем вы получите тему для всех компонентов пользовательского интерфейса материалов, которые будут правильно отображаться на темном фоне. .

• https://material -ui.com / настройка / темы /
• https://material -ui.com / настройка / палитра /

Если вы все еще хотите полностью контролировать внешний вид (и не хотите использовать тему), вам необходимо установить собственные стили для InputLabelProps и InputProps на вашем TextInput (https://material -ui.com / api / text-field / ).