0
308
ViewsCambiar el color de la interfaz de usuario del material Seleccionar el borde del componente no funciona
Estoy usando material-ui v5 con fines de aprendizaje. Tengo dificultades para anular el estilo predeterminado del componente Mui Select. Quiero cambiar el color de Seleccionar al pasar el mouse sobre él y también en un estado enfocado. Actualmente, el color del estado enfocado es así.
Aquí está mi código:
import { useState, useEffect } from 'react'; import { makeStyles } from '@mui/styles'; import { Select, MenuItem } from '@mui/material'; const useStyles = makeStyles({ select: { '&.MuiOutlinedInput-root': { width: '200px' }, '& .MuiOutlinedInput-notchedOutline': { borderColor: 'red', '&:hover': { borderColor: 'green' } }, } }) function App() { const classes = useStyles(); const [age, setAge] = useState(''); const handleChange = (event: SelectChangeEvent) => { setAge(event.target.value); }; return ( <Select variant="outlined" className={classes.select} labelId="demo-simple-select-label" id="demo-simple-select" value={age} label="Age" onChange={handleChange} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> ); } export default App;Cualquier ayuda sería muy apreciada.
2 answers
Answer question0
Ante todo:
@mui/styles es la solución de estilo heredada para MUI. Depende de JSS como una solución de estilo, que ya no se usa en @mui/material, obsoleto en v5. Si no desea tener emoción y JSS en su paquete, consulte la documentación de @mui/system, que es la alternativa recomendada.
Puedes consultar más aquí . Entonces, para la personalización, probablemente debería optar por componentes con estilo .
Select componentes en MUI usa campos de entrada detrás de él, y para lograr lo que desea, necesita personalizar la input y es por eso que está usando la clase .MuiOutlinedInput-root . Entonces, MUI tiene algunos ejemplos de personalizaciones input aquí .
Y aquí hay un ejemplo de Select personalizado:
const CustomSelect = styled(Select)(() => ({ width: 300, "&.MuiOutlinedInput-root": { "& fieldset": { borderColor: "red" }, "&:hover fieldset": { borderColor: "yellow" }, "&.Mui-focused fieldset": { borderColor: "green" } } }));0
Usando la nueva API para estilos, "estilo", puede lograr el nivel de personalización que desea utilizando los objetos de clase que mui ofrece para importar. Indiqué como importante que no dejes espacios entre el '&' y el '.' en el css, de lo contrario no funcionará, ¡pruébalo! En esta muestra, estoy personalizando el color del borde de una selección, al pasar el mouse, con el selector de desplazamiento y en el estado de enfoque con la clase enfocada del componente. Para terminar, la selección se declara como notchedOutlined, de ahí la clase utilizada.
import { Select, outlinedInputClasses, selectClasses } from '@mui/material'; import { styled } from '@mui/system'; export const StyledSelect = styled(Select)` width: 150px; height: 40px; color: #fff; border-color: #fff; & .${selectClasses.icon} { color: #fff; } & .${outlinedInputClasses.notchedOutline} { border-color: #fff; } &:hover .${outlinedInputClasses.notchedOutline} { border-color: #fff; } &.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} { // VERY IMPORTANT TO NOT LEAVE AN EMPTY SPACE BETWEEN '&' AND '.' border-color: #fff !important; } `;