Clash Royale CLAN TAG

How to style material-ui textfield

I have been trying to work out how to style a material-ui.next textfield (https://material-ui-next.com/demos/text-fields/) component (React JS).

<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 (I have attached relevant part):

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.

Thanking you in advance for your time.
Regards. andre

What it currently looks like

2 Answers
2

Try using the inputStyle prop on TextField. From the docs...

inputStyle

TextField

inputStyle (object) - Override the inline-styles of the TextField's input
element. When multiLine is false: define the style of the input
element. When multiLine is true: define the style of the container of
the textarea.

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


You need to add the InputProps property to the TextField.

InputProps

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.