I am currently trying to change the default colors of MUI TextField (text and border). I have failed with several approaches as mentioned by the official web site. Among all the solutions I have experimented, the most promising one is this one:
<TextField InputLabelProps={{ style: { color: 'white' } }} ...>
This solution changes the color of the text when unedited. As soon as I edit the text, the color takes it original value. I also tried this solution without any success:
const theme = createTheme({
components: {
MuiTextField: {
defaultProps: {
style: { color: 'white'}
}
}
}
});
After applying this theme, I had no changes. Did someone experimented the same issue ? Regards.
CodePudding user response:
Can't you just pass className to your TextField component and change styles using css?
CodePudding user response:
You can make use of MUI color palette:
"primary" | "secondary" | "error" | "info" | "success" | "warning"
<TextField
color="primary"
/>
These colors can be overwritten with a ThemeProvider
and be used as the border color onFocus.
const getMuiTheme = () =>
createTheme({
palette: {
primary: {
main: "#FF0000" // red
},
secondary: {
main: "#00FF00" // green
}
}
});
<ThemeProvider theme={getMuiTheme()}>
<TextField />
...
</ThemeProvider>
You can then deal with the input color by using sx
prop inside TextField
:
sx={{
input: {
color: getMuiTheme().palette.secondary.main
}
}}