Here is a sample code snippet demonstrating the use of vibrant colors on different parts of the TextField component.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
});
const useLabelStyles = makeStyles({
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
});
function App() {
const classes = useStyles();
const labelClasses = useLabelStyles();
return (
<div className="App">
<TextField
InputProps={{ classes: classes }}
InputLabelProps={{ classes: labelClasses }}
label="label"
defaultValue="text"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/textfield-colors-rewck?fontsize=14
Let's achieve the same appearance by utilizing the theme:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiInput: {
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
},
MuiInputLabel: {
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<TextField label="label" defaultValue="text" />
</div>
</ThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
https://codesandbox.io/s/textfield-colors-via-theme-09jk1?fontsize=14&hidenavigation=1&theme=dark
Check out these related answers:
- How do I custom style the underline of Material-UI without using theme?
- How can I change the label size of a material ui TextField?
- Change InputLabel color of a Select component when clicked/focused
- Change outline for OutlinedInput with React material-ui