Интегрированный стиль пользовательского интерфейса - специфические цвета компонентов

Question

Я пытаюсь стилизовать свои TextFields из Material-UI.У меня черный фон, и мне нужно, чтобы граница textField и текст были белыми.Вот мой (соответствующий) код:

render() {
    const styles = {
      width: {
        width: '90%',
        margin: '5px',
        padding: '5px',
        textColor: '#ffffff',
        hintColor: '#ffffff',
        floatingLabelColor: '#ffffff',
        disabledTextColor: '#673ab7',
        focusColor: '#c2185b',
        borderColor: '#ffffff'
      },
      button: {
        margin: '15px',
        padding: '20px',
        width: '60%'
      }
    };

<TextField
              className="classes.textField"
              label="Name Your Vice"
              type="text"
              name="vice"
              value={this.props.vice}
              margin="normal"
              variant="outlined"
              style={styles.width}
              onChange={this.props.handleInputChange}
            />

Чего мне не хватает, чтобы заставить это работать?

Спасибо

Answer 1

Чтобы установить границу и цвет фона в варианте TextField с «контуром», вам нужно выбрать набор полей.

Вы можете сделать что-то вроде этого:

const styles = {
  textField: {
    [`& fieldset`]: {
      border:"1px solid #fff",
      backgroundColor: "#fff"
    }
};

Answer 2

Я обнаружил, что для пользовательского интерфейса материала нужно было много покопаться в компонентах, чтобы внести самые базовые изменения.Вместо этого я использовал Materialize (более дружественную версию Material UI) и обнаружил, что настроить свои компоненты относительно просто.

Answer 3

TextField - это абстракция нескольких других компонентов.из документации :

Расширенная конфигурация

Важно понимать, что текстовое поле представляет собой простую абстракцию поверх следующих компонентов:

• FormControl
• InputLabel
• Элемент списка
• Вход
• FormHelperText

Некоторые изСтили, которые вы пытаетесь применить, применимы к Input.

Поэтому ваш код должен выглядеть примерно так:

const styles = {
  input: {
    backgroundColor: 'red',
  },
}

< TextField InputProps = {{ style: styles.input }} />