javascript - 如何设置 Material-ui 文本字段的样式

Question

我一直在尝试研究如何设计 material-ui TextField 的样式组件。

<TextField
    id="email"
    label="Email"
    className={classes.textField}
    value={this.state.form_email}
    onChange={this.handle_change('form_email')}
    margin="normal"
/>

我的类(class)创建如下:

const styles = theme => ({
    textField: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto',
        color: 'white',
        paddingBottom: 0,
        marginTop: 0,
        fontWeight: 500
    },
});

我的问题是我似乎无法将文本字段的颜色更改为白色。我似乎能够将样式应用于整个文本字段(因为宽度样式有效等)...但我认为问题是我没有将样式进一步应用到链中并应用到实际输入中。

我尝试查看有关传递 inputProps 的其他答案，但没有成功。

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

What it currently looks like

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所述。 .