How to style material-ui textfield
JavascriptReactjsMaterial UiJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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.
Solution 3 - Javascript
This is a solution with inline styles:
<TextField
style={{
backgroundColor: "blue"
}}
InputProps={{
style: {
color: "red"
}
}}
/>
Solution 4 - Javascript
I'd suggest keeping your style within a theme.
const theme = createMuiTheme({
overrides: {
MuiInputBase: {
input: {
background: "#fff",
},
},
},
});
Solution 5 - Javascript
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
Solution 6 - Javascript
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' }} />
Solution 7 - Javascript
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}} />
Solution 8 - Javascript
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'} }}
/>
Solution 9 - Javascript
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.
Solution 10 - Javascript
<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);
}}
/>