Change TextField font color in MUI?

Question

I'm currently using MUI.

And I'm having issues trying to change the font color of the multiline TextField.

<TextField className = "textfield"            fullWidth            multiline            label   = "Debugger"            rows    = "10"            margin  = "normal"/> 

And the CSS:

.textfield {     background-color: #000;     color: green; } 

However, somehow I only get the black background and the font is still black. Does anyone know how to properly change the font color of a TextField using MUI?

Answer 1

I referred this page TextField API

And I override the TextField using Classes

const styles = theme => ({     multilineColor:{         color:'red'     } }); 

Apply the class to TextField using InputProps.

<TextField    className = "textfield"   fullWidth   multiline   InputProps={{     className: classes.multilineColor   }}   label   = "Debugger"   rows    = "10"   margin  = "normal" /> 

EDIT In older version you have to specify the key input

<TextField      className = "textfield"     fullWidth     multiline     InputProps={{         classes: {             input: classes.multilineColor         }     }}     label   = "Debugger"     rows    = "10"     margin  = "normal" /> 

Hope this will work.

Answer 2

In MUI v5, you can just do this using sx prop:

<TextField sx={{ input: { color: 'red' } }} /> 

A bit longer approach if you want something more reusable:

const options = {   shouldForwardProp: (prop) => prop !== 'fontColor', }; const StyledTextField = styled(   TextField,   options, )(({ fontColor }) => ({   input: {     color: fontColor,   }, })); 

<StyledTextField label="Outlined" fontColor="green" /> <StyledTextField label="Outlined" fontColor="purple" /> 

Live Demo