How to style material-ui textfield How to style material-ui textfield javascript javascript

How to style material-ui 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.


All the answers here shows how to style things with InputProps or inputProps, but no one explained why, and how it works. And no one explained whats the difference between inputProps and InputProps

<TextField        variant="outlined"    // inputProps are used to pass attributes native to the underlying     // HTML input element, e.g. name, id, style.    inputProps={{      style: { textAlign: 'center' },    }    // InputProps (capital I) passes props to the wrapper Material     // component. Can be  one of the following: Input, FilledInput,     // OutlinedInput. You can pass here anything that the underlying    // Material component uses: error, value, onChange, and classes.    InputProps={{       // Usually you don't need className, the `classes` object will       // be sufficient. However, you can also use it and this will       // add your class to the div of the InputBase.       className: styles.slider_filter_input,        classes: {          root: classes.root          focused: classes.focused          // The list of keys you pass here depend on your variant          // If for example you used variant="outlined", then you need          // to check the CSS API of the OutlinedInput.       }    }}/>

Here is a working codesandbox showing the ideas above.


This is a solution with inline styles:

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