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

Question

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

1

Я пытаюсь создать свой 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}
            />

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

Спасибо

Daniel Cross 13 окт. 2018, в 17:06

Источник

0

Что делает с этим кодом? Что не соответствует тому, что вы ожидали.
Justin Wager 13 окт. 2018, в 15:12
0

где return
evgeni fotia 13 окт. 2018, в 15:23
0

При этом отображается текстовое поле с основным стилем, основанным на стандартной теме Material-UI. Возврата нет, потому что я не хотел вставлять весь свой код, поскольку он не имеет отношения к реальной проблеме.
Daniel Cross 13 окт. 2018, в 15:30

Показать ещё 1 комментарий

Теги:

javascript

material-ui

2 ответа

Ещё вопросы

Что делает с этим кодом? Что не соответствует тому, что вы ожидали.
При этом отображается текстовое поле с основным стилем, основанным на стандартной теме Material-UI. Возврата нет, потому что я не хотел вставлять весь свой код, поскольку он не имеет отношения к реальной проблеме.

kasho · Answer 1 · 2018-10-15T14-58-00.000Z

Чтобы установить границы и цвет фона с помощью варианта "TextField", вам необходимо настроить таргетинг на набор полей.

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

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

Adrien · Answer 2 · 2018-10-15T11-01-00.000Z

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

Расширенная настройка

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

FormControl

InputLabel

Элемент списка

вход

FormHelperText

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

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

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

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