Este es mi datepicker actual.

Quiero agregar la box-shadow cuando el campo de textfield está focus como a continuación

Intenté agregarlo usando makeStyles pero no funcionó

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(() => ({ root: { marginTop: 0, "& .MuiInputBase-root": { border: "1px solid grey", borderRadius: "0.25rem", padding: "0.375rem 0.75rem", "&:focus": { //added here borderColor: "#86b7f", boxShadow: "0 0 0 0.25rem red" }, "&:before": { borderBottom: "none" }, "&:after": { borderBottom: "none" }, "&:hover:hover:not(.Mui-disabled):before": { borderBottom: "none" }, "& .MuiButtonBase-root": { padding: 0 } } } })); 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" }} className={classes.root} /> </MuiPickersUtilsProvider> </> ); }

Caja de arena de código:
https://codesandbox.io/s/material-demo-bifurcado-b6z4b?file=/demo.js:0-1460