如何设置Material-UI文本框的样式 [英] How to style material-ui textfield

问题描述

我一直在尝试找出如何设置 material-ui.next文本字段的样式组件.

I have been trying to work out how to style a material-ui.next textfield component.

<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
    },
});

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

My problem is that I can not seem to get the colour of the text field to change to white. I seem to be able to apply styling to the overall text field (because the width styling works etc)... but I think the problem is that I am not applying the styles further down the chain and into the actual input.

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

I have tried to look at the other answers dealing with passing inputProps but have had no success.

已经尽我所能尝试了所有事情，但认为我需要问是否有人知道我在做错什么.

Have tried everything to the best of my ability but think I need to ask if anyone knows what I am doing wrong.

目前的样子

What it currently looks like

推荐答案

您需要将InputProps属性添加到TextField.

You need to add the InputProps property to the 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,
    }}
/>

顺便说一句，您还可以按照这里.

As an aside, you can also style the label or use an override as described here.

这篇关于如何设置Material-UI文本框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！