Question

我正在尝试从Material-UI设置TextField的样式。我的背景为黑色，我需要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是其他几个组件的抽象。来自documentation:

高级配置

了解文本字段很简单很重要   以下组件之上的抽象：


FormControl

InputLabel

列表项

输入

FormHelperText

您要尝试使用的某些样式适用于Input。

所以您的代码应该看起来像这样：

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

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

Answer 2

要使用TextField变体“概述”设置边框和背景色，您需要定位字段集。

您可以执行以下操作：

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

Answer 3

我发现Material UI需要深入挖掘这些组件以进行非常基本的更改。相反，我使用了Materialize（Material UI的更友好版本），发现自定义组件相对简单。

材质UI内联样式-特定的组件颜色

3 个答案: