Change TextField font color in MUI? - reactjs

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

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

Answer 2

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 3

Using inputProps is correct, as others have posted. Here's a slightly simpler example:
<TextField
multiline
inputProps={{ style: { color: "red" } }}
/* ... */
/>

Answer 4

How to set color property and background property of Text Field
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = {
root: {
background: "black"
},
input: {
color: "white"
}
};
function CustomizedInputs(props) {
const { classes } = props;
return (
<TextField
defaultValue="color"
className={classes.root}
InputProps={{
className: classes.input
}}
/>
);
}
CustomizedInputs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(CustomizedInputs);

Answer 5

//textfield customization
const CssTextField = withStyles({
root: {
'& .MuiInputBase-root': {
color: 'white',
},
},
})(TextField);

Answer 6

This should work !
import { TextField, makeStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
input: {
color: "#FFF",
},
}));
const MyInput = () => {
const classes = useStyles();
return (
<TextField
inputProps={{ className: classes.input }}
id="outlined-basic"
label="Write something..."
variant="outlined"
/>
);
};
export default MyInput;

Answer 7

If you are looking for a more generic fix, you can change your theme to contain that color, in my case I needed to change the input background and the disabled as well, so I end up using the ThemeProvider and a custom Theme.
Custom theme
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
backgroundColor: '#fff',
'&.Mui-disabled': {
backgroundColor: '#e4e4e4',
},
},
},
},
},
});
const withDefaultTheme =
<P extends object>(Component: React.ComponentType<P>) =>
(props: any) =>
(
<ThemeProvider theme={theme}>
<Component {...props} />
</ThemeProvider>
);

Answer 8

This is working in my case:
import React from 'react';
import { TextField, } from '#mui/material';
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
textfield_input: {
color: `#c5cae9 !important`,
}
}));
function Videoedit() {
const classes = useStyles();
return (<div>
<TextField
value={title}
required
label="Title"
variant="filled"
inputProps={{className: classes.textfield_input}}
color="primary"
focused
/>)
</div>;
}
export default Videoedit;

Answer 9

if you are using styled component with TextField then just write this code inside your styled component:
input: {
color: '#ffffff',
},
if you want to change placeholder color:
label: {
color: '#ffffff',
},

Answer 10

Use your Component like below
const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
}
})(TextField);

Answer 11

Try below css
.textfield{
color: #000;
}