To complete the task, utilize the Material UI outlined input field (TextField component from
"@material-ui/core": "^4.12.2",Here is the outcome of my work: https://i.sstatic.net/lw1vC.png
Current theme override for InputLabel:
import { createTheme } from "@material-ui/core/styles";
export const muiTheme = createTheme({
overrides: {
MuiInputLabel: {
outlined: {
"&$focused": {
color: "#3f3fa0",
},
},
},
},
},
The above global theme override modifies the label ("Email address") color to blue.
The blue border-color is achieved by enclosing the TextField in a styled component with the following CSS:
import styled from "styled-components";
import { TextField } from "@material-ui/core";
export const CustomTextField = styled(TextField)`
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
border-color: #3f3fa0;
}
`;
I render the component as shown below (within the ThemeProvider):
<CustomTextField
variant="outlined"
label={label}
/>
This workaround functions well, as depicted in the image provided above. Nonetheless, occasionally the Mui code appends random numbers to their class names, causing my customized (temporary) CSS solution to fail and resulting in this appearance:
https://i.sstatic.net/nNYpA.png
I attempted numerous variations within the Mui overrides object to supersede the border-color property but was unsuccessful. Can you provide assistance?