1

我正在尝试从 Material-UI 设置我的 TextFields 的样式。我有黑色背景，我需要 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}
            />

我缺少什么让这个工作？

谢谢

4

3 回答 3

1

我发现 Material UI 需要对组件进行大量挖掘才能进行非常基本的更改。我改为使用 Materialize（更友好的 Material UI 版本），并发现自定义组件相对简单。

于 2018-11-09T11:09:13.383 回答
0

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

你可以这样做：

const styles = {
  textField: {
    [`& fieldset`]: {
      border:"1px solid #fff",
      backgroundColor: "#fff"
    }
};
于 2018-10-15T17:06:47.663 回答
0

TextField 是其他几个组件的抽象。从文档中：

高级配置

重要的是要理解文本字段是对以下组件的简单抽象：

  • 表单控件
  • 输入标签
  • 项目清单
  • 输入
  • FormHelperText

您尝试做的一些样式适用于Input.

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

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

< TextField InputProps = {{ style: styles.input }} />
于 2018-10-15T13:23:49.810 回答