I am currently working on a React project using MUI and styled-components, but I am facing an issue with changing the outline border color of a textfield. Despite reading the documentation and attempting to overwrite the class names of the component, it does not seem to be working as expected.
Below is the styled-component code for the textfield:
export const LoginField = styled(TextField)`
margin-top: 10px !important;
width: 100% !important;
border-color: ${(props) => props.theme.text.primary}!important;
& .MuiInputLabel-root {
color: ${(props) => props.theme.text.primary};
}
& .MuiOutlinedInput-root {
border-color: ${(props) => props.theme.text.primary};
}
& .MuiOutlinedInput-root {
& fieldset {
border-color: red,
},
& .MuiSvgIcon-root {
color: ${(props) => props.theme.text.primary};
}
& .MuiFormControl-root {
color: ${(props) => props.theme.text.primary};
}
// Mui bug where it changes the background of the input on autofill
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s,
color 5000s ease-in-out 0s;
transition-delay: background-color 5000s, color 5000s;
}
`;
It's interesting that this customization works for all classes except .MuiOutlinedInput-root, which is causing the issue. Despite checking multiple sources confirming it as the correct class name.
The textfield implementation in my React component:
<LoginField
variant="outlined"
label="E-mail"
type="email"
value={email}
onChange={handleEmail}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Person />
</InputAdornment>
)
}}
/>
Since I have custom themes for light and dark modes, I utilize theme props to dynamically set colors.
I have also attempted another solution:
export const LoginField = styled(TextField)({
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "white",
}
},
});
While this successfully changes the border color to white, it lacks the ability to use custom theme props and maintain consistency across styled-components. My goal is to ensure uniformity across all components, which the above solution fails to achieve.