How to style material-ui textfield

Question

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"
/>

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.

Answer 2

This is a solution with inline styles:

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

Answer 3

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

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

Answer 4

It really depends on what exactly are you trying to change.

The documentation has a bunch of examples on custom TextFields, take a look at them here:

https://material-ui.com/demos/text-fields/#customized-inputs

More information about customization can be found here:

https://material-ui.com/customization/overrides/

and

https://material-ui.com/customization/themes/

Have you tried using !important for the color changes? I had the same problem when I tried to set a default color for the border of an outlined TextField

Take a look at this: https://stackblitz.com/edit/material-ui-custom-outline-color

Answer 5

I'd suggest keeping your style within a theme.

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});

Answer 6

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 things that are native to the underlying html input element, things like name, id, style.
    inputProps={{
      style: { textAlign: 'center' },
    }
    // this 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 like error, value, onChange, and classes
    InputProps={{
       className: styles.slider_filter_input, 
       // usually you dont need className, the classes object will be sufficient
       //  but wanted to show that you can also use it (this will put your class on div of the InputBase)
       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 and so an
       }
    }}
/>

Finally here is a working codesandbox showing the ideas above https://codesandbox.io/s/material-ui-drawer-8p6wv