How to style material-ui textfield

Question

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

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

My classes are created as follows:

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.

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

Answer 1

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.