I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me.
The element in question is an outlined TextField, and my focus has been on styling its label and border.
Initially, I thought using the sx prop for customization would be straightforward, but unfortunately, it did not produce the desired results.
const One = () => (
<div>
<TextField
id="outlined-basic"
label="One"
variant="outlined"
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: 0,
},
"& .MuiInputLabel-root": {
color: "orange",
},
"& .Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "orange",
},
}}
/>
</div>
My goal is to keep the label always orange and have the border turn orange when focused. However, when I focus on the TextField, both the label and border revert back to blue. The only style that sticks is the border-radius adjustment.
After inspecting the result, it appears that the default styles are reinserted when the component is focused. This is confusing to me because I anticipated these styles would have been applied initially, upon mounting the TextField. Why isn't the sx prop overriding the default styles?
https://i.sstatic.net/9EpXr.png
https://codesandbox.io/s/material-ui-customization-zg5v5v?file=/src/components/One.jsx