如何设置材料-ui文本字段的样式

Question

我一直试图找出如何设计material-ui.next textfield组件的样式。

<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的其他答案，但没有成功。

尽我所能尽力尝试了一切，但我想我是否需要问是否有人知道我做错了什么。

它目前的样子

Answer 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,
    }}
/>

另外，您还可以设置标签样式或使用here描述的覆盖。

Answer 2

这是一个内联样式的解决方案：

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

Answer 3

尝试在inputStyle上使用TextField道具。来自docs ......

inputStyle（object） - 覆盖TextField的input元素的内联样式。当multiLine为false时：定义input元素的样式。当multiLine为true时：定义textarea容器的样式。

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

Answer 4

这实际上取决于你想要改变的是什么。

该文档有一些关于自定义TextFields的示例，请在此处查看它们：

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

Answer 5

我建议把你的风格保持在主题之内。

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