0
144
VisualizaçõesOrden de estilo de Material UI
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
2 Respostas
Responde à pergunta0
Puede aumentar la especificidad del selector de clase enfocada agregándolo a la raíz.
const One = () => ( <div> <TextField id="outlined-basic" label="One" variant="outlined" sx={{ '& .MuiOutlinedInput-root': { borderRadius: 0, }, '& .MuiInputLabel-root': { color: 'orange', }, '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'orange', }, }} /> </div> );¡Esto debería hacerlo por ti!
0
Puede anidar su último estilo en su primer estilo
Aquí hay una caja de arena
<TextField id="outlined-basic" label="One" variant="outlined" sx={{ "& .MuiOutlinedInput-root": { borderRadius: 0, "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "orange", color: "inherit" } }, "& .MuiInputLabel-root": { color: "orange" } }} />;