He pasado como 10 horas en la personalización para entenderlo perfectamente, pero me da dolor de cabeza a medida que avanzo.

Estoy diseñando TextField delineado, específicamente su etiqueta y borde. Pensé que no sería problemático si usaba sx prop para personalizar, pero no funcionó tan bien como esperaba.

 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>

Quiero que la etiqueta sea naranja siempre y que el borde sea naranja cuando esté enfocado . Pero cuando me concentro en TextField , la etiqueta y el borde vuelven a ser azules. Pero border-radius funciona bien.

Inspeccioné el resultado y parecía que el estilo predeterminado se insertó nuevamente cuando se enfocó el componente. No lo entiendo porque creo que debería haberse insertado antes, como cuando se montó el TextField . ¿Por qué sx prop no anula el estilo predeterminado?

https://codesandbox.io/s/material-ui-customization-zg5v5v?file=/src/components/One.jsx