Как стиль text-ui textfield

Я пытался понять, как стилизовать компонент текстового поля material-ui.next.

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

Мои занятия создаются следующим образом:

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

Моя проблема в том, что я не могу изменить цвет текстового поля на белый. Мне кажется, что я могу применить стилизацию ко всему текстовому полю (потому что стилизация ширины работает и т.д.)... но я думаю, что проблема в том, что я не применяю стили дальше по цепочке и к фактическому вводу.

Я попытался посмотреть на другие ответы, касающиеся передачи inputProps, но безуспешно.

Я старался изо всех сил, но думаю, мне нужно спросить, знает ли кто-нибудь, что я делаю неправильно.

Как это в настоящее время выглядит

Ответ 1

Вам необходимо добавить свойство InputProps в TextField.

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',            
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
    input: {
        color: 'white'
    }
});

JSX:

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
    InputProps={{
        className: classes.input,
    }}
/>

Кроме того, вы также можете стилизовать метку или использовать переопределение, как описано здесь.

Ответ 2

Попробуйте использовать inputStyle на TextField. Из документов...

inputStyle (object) - переопределяет встроенные стили элемента ввода TextField. Когда multiLine имеет значение false: определите стиль элемента ввода. Когда multiLine истинно: определите стиль контейнера текстового поля.

<TextField inputStyle={{ backgroundColor: 'red' }} />

Ответ 3

Это решение со встроенными стилями:

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>

Ответ 4

Это действительно зависит от того, что именно вы пытаетесь изменить.

В документации есть множество примеров пользовательских текстовых полей, посмотрите их здесь:

https://material-ui.com/demos/text-fields/#customized-inputs

Более подробную информацию о настройке можно найти здесь:

https://material-ui.com/customization/overrides/

а также

https://material-ui.com/customization/themes/

Вы пробовали использовать! Важный для изменения цвета? У меня была такая же проблема, когда я пытался установить цвет по умолчанию для границы выделенного TextField

Взгляните на это: https://stackblitz.com/edit/material-ui-custom-outline-color

Ответ 5

Я бы предложил сохранить ваш стиль в рамках темы.

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});