- Upon the initial page load, I expected the border color of the text box to be red.
- However, it appeared grey instead.
- I tried setting the border color to red for all classes but the issue persisted.
- Even after making changes, the border color remained unchanged.
I'm unsure how to target this tag specifically.
I was able to achieve the desired result by using "!important", but is there a way to achieve it without using that?
If anyone has any insights on this, please let me know so I can address it in the future.
- Please refer to my code snippet and sandbox link below.
https://codesandbox.io/s/m58841kkwp
cssLabel: {
"&$cssFocused": {
color: { borderColor: "red" }
}
},
cssFocused: { borderColor: "red" },
cssUnderline: {
"&:after": {
borderBottomColor: "red"
}
},
cssOutlinedInput: {
"&$cssFocused $notchedOutline": {
borderColor: "green"
}
},
notchedOutline: { borderColor: "red !important" },
<div className={classes.container}>
<TextField
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
}
}}
label="Custom CSS border"
variant="outlined"
id="custom-css-outlined-input"
/>
</div>