0
477
VistasMaterial ui: no se puede anular el estilo del selector de fechas usando makeStyles
Quiero agregar un borde para el selector de fecha a continuación.
Cuando aplico el estilo en línea en el inspector web, funciona. 
Pero cuando trato de aplicar el estilo usando makeStyles , no pasa nada.
demo.js
import "date-fns"; import React from "react"; import DateFnsUtils from "@date-io/date-fns"; import { MuiPickersUtilsProvider, KeyboardTimePicker } from "@material-ui/pickers"; import { makeStyles } from "@material-ui/core/styles"; export const styles = makeStyles(() => ({ formControl: { border: "1px solid grey" } })); export default function MaterialUIPickers() { const classes = styles(); const [selectedDate, setSelectedDate] = React.useState( new Date("2014-08-18T21:11:54") ); const handleDateChange = (date) => { setSelectedDate(date); }; return ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <KeyboardTimePicker margin="normal" id="time-picker" value={selectedDate} onChange={handleDateChange} KeyboardButtonProps={{ "aria-label": "change time" }} classes={{ formControl: classes.formControl }} /> </MuiPickersUtilsProvider> ); } Caja de arena de código:
https://codesandbox.io/s/material-demo-bifurcado-viq2m?file=/demo.js
3 Respuestas
Responde la pregunta0
Si revisa el registro, verá
Como KeyboardTimePicker se hereda de TextField, y mientras que la API CSS de TextField solo acepta root ( referencia ), la solución es actualizar la clave formControl a root
<KeyboardTimePicker margin="normal" id="time-picker" value={selectedDate} onChange={handleDateChange} KeyboardButtonProps={{ "aria-label": "change time" }} classes={{ root: classes.formControl }} /> 
0
Eso es porque @material-ui/pickers es un desarrollo separado además de MUI.
Los selectores de fecha/hora son controles bastante simples desde la perspectiva de UX, por lo que la mayoría de las personas solo usan la apariencia predeterminada
Es por eso que no proporcionamos ninguna API de clases de componente para anular las hojas de estilo para ningún componente en particular. La única forma de anular las hojas de estilo existentes es mediante el uso de anulaciones de temas globales de material-ui.
Eso es según sus documentos .
He configurado un ejemplo con un borde rojo.
https://codesandbox.io/s/material-demo-forked-wgpvf?file=/demo.js
0
Encontré otra solución que es diferente de otras respuestas de esta publicación .
const useStyles = makeStyles({ root: { "& .MuiInputBase-root": { border: "1px solid red", } } }); const classes = useStyles(); return ( <MuiPickersUtilsProvider utils={DateFnsUtils}> <KeyboardDatePicker className={classes.root} {...} /> </MuiPickersUtilsProvider> );Creo que esta es también una de las soluciones.