0
358
VistasCambiar el color del borde del Selector de fecha de la interfaz de usuario del material
Este es mi selector de fecha de la interfaz de usuario del material, lo único que quiero es cambiar el color del borde. Probé clases, cambiando el color primario del tema, usando WithStyles... Nada parece funcionar.
2 Respuestas
Responde la pregunta0
La propiedad className no se aplica actualmente al componente MUI DatePicker. Hay un problema abierto en GitHub para este error.
Alternativamente, puede pasar prop className a renderInput prop como:
<DatePicker label="Birthdate" defaultValue={new Date()} renderInput={(params) => ( <TextField {...params} className="myDatePicker" /> )} /> y aplique el css en la etiqueta fieldset como:
.myDatePicker fieldset.MuiOutlinedInput-notchedOutline { border-color: green; } .myDatePicker .Mui-focused fieldset.MuiOutlinedInput-notchedOutline { border-color: red; }Puede echar un vistazo a este sandbox para ver un ejemplo de trabajo en vivo de este uso.
0
Esta es una forma de personalizar el estilo predeterminado, activo y de desplazamiento para el color del borde. También puede hacer lo mismo usando componentes con estilo. Aquí hay uncodesandbox de trabajo.
<DatePicker label="Birthdate" defaultValue={new Date()} renderInput={(params) => ( <TextField {...params} sx={{ '& .MuiOutlinedInput-root': { '& fieldset': { borderColor: 'red', }, '&:hover fieldset': { borderColor: 'green', }, '&.Mui-focused fieldset': { borderColor: 'purple', }, }, }} /> )} />