I am having trouble adding a border to the datepicker below.
I tried applying inline styles in Web inspector and it worked.
https://i.sstatic.net/Q4KAC.png
However, when I attempt to apply the style using makeStyles,
nothing happens.
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>
);
}
CodeSandbox:
https://codesandbox.io/s/material-demo-forked-viq2m?file=/demo.js