0
486
ViewsMaterial ui - cannot override datepicker style using makeStyles
I want to add border for the datepicker below.
When I apple inline style in Web inspector, it works.
But when I try 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
3 answers
Answer question0
If you check the log, you will see
As KeyboardTimePicker is inherited from TextField, and while TextField CSS API only accepts root (reference), so the solution is to update the formControl key to root
<KeyboardTimePicker
margin="normal"
id="time-picker"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change time"
}}
classes={{
root: classes.formControl
}}
/>
0
That's because @material-ui/pickers is a separate development on top of MUI.
Date/Time pickers are quite simple controls from UX perspective, so most people just use the default appearance
That's why we are not providing any for-component classes api to override stylesheets for any particular component. The only way to override existing stylesheets are with the use of global material-ui theme overrides.
That's as per their docs.
I have set up an example with a red border.
https://codesandbox.io/s/material-demo-forked-wgpvf?file=/demo.js
0
I've found another solution which is different from other answers from this post
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
border: "1px solid red",
}
}
});
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
{...}
/>
</MuiPickersUtilsProvider>
);
I think this is also one of the solutions.