106

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

textfield with a blue background and a slightly lighter blue label

Improve this question
0

11 Answers 11

Reset to default
96

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks finally someone explained. It would be nice if you could explain why style props is working sometimes ( example: <TextField style={{margin: 15, color: 'blue'}} />, margin works but not color... thanks again
@NielsDominguez What you are describing is not related to Material-Ui but to how css works, when you are adding a style to a component and that style is not working that means some more specific styles are applying to that rule - based on css specificity rules.
@NielsDominguez Anyway notice that your example <TextField style={{margin: 15, color: 'blue'}} />, will not work anyway because you are passing style as a prop to TextField component, and that component is not doing anything with that prop.style props are applied to as inline style when they are passed to native dom elements like div. When you pass them to a React Component that react Component needs to handle it just like any other prop.Usually material ui Components pass styles to underlying native elements using props like inputProps.
Not that it ever matters to say this but this should be the accepted answer.
90

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={styles.textField} value={this.state.form_email} onChange={this.handle_change('form_email')} margin="normal" InputProps={{ className: styles.input, }} />

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

Improve this answer

4 Comments

How are the two classNames different, in other words, why doe MUI need more than one? (vs. for example the white color going into the textField CSS rule from the theme?
Thanks this worked well. The Material-UI docs aren't clear when it comes to letting you know that you have to use InputProps to style text fields.
Where do I get classes from?
@AleksaRistic I've updated the code - it should have been styles not classes.
24

This is a solution with inline styles:

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

Comments

19

I'd suggest keeping your style within a theme.

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

2 Comments

Awesome! This is the best solution if you are using many TextFields.
what does the html line look like?
7

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

Improve this answer

Comments

4

You cann pass styles to any of the children elements in the hierarchy:

TextField > Input > input (HTML element)

Notice the uper or lower case in InputProps vs. inputProps

// pass styles (or props) to the Input component <TextField InputProps={{className: classes.input}} /> // pass styles (or props) to the inner input element <TextField inputProps={{className: classes.input}} />
Improve this answer

Comments

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' }} />
Improve this answer

Comments

3

As of MUI V5, you can use the sx prop to change style settings. You still need to use inputProps to pass down those props to the input field. You could consider doing it like this:

 <TextField sx={{ marginTop: 10 }} inputProps={{ sx: {color: '#fff'} }} />

The SX prop in MUI V5

Improve this answer

Comments

3 
<TextField color="whitish" label="Enter Your Name" type="Text" InputLabelProps={{ style: { color: "white" }, }} sx={{ ".css-x2l1vy-MuiInputBase-root-MuiOutlinedInput-root": { color: "white", }, }} InputProps={{ sx: { ".css-1d3z3hw-MuiOutlinedInput-notchedOutline": { border: "2px solid white", }, "&:hover": { ".css-1d3z3hw-MuiOutlinedInput-notchedOutline": { border: "2px solid white", }, }, }, }} size="medium" variant="outlined" fullWidth value={name} onChange={(e) => { setName(e.target.value); }} />

Customize on_hover,color,border TextField

Improve this answer

2 Comments

you wouldn't specifically target those generated classnames
dont target those dynamic generate css class names. i
0

Try using the FilledInput component instead of TextField. Then you can use simple inline styling like this:

style={{color: 'white' }}

This also will lighten the placeholder text... hooray.

Improve this answer

Comments

0

Give a classname to the textfield.

 <TextField className={styles.search_bar} autoComplete={"off"} InputProps={{ endAdornment: ( <Box className={'search_icon_container'} component={"span"}> <IconButton> <CiSearch fontSize={icon_default_size} /> </IconButton> </Box> ), }} size={"small"} placeholder="Search" />

Do this in your CSS file.

.search_bar div{ border-radius: 25px; width: 45vw; padding-right: 0; }

It worked for me. :) Output

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.