MUI KeyboardDatePicker change styles of date input box-CodePudding

The

CodePudding user response：

It seems you don't need to write a custom hook like this useStyles = (params: any) => ..., the hook returned by makeStyles already accepts a props param.

When styling MUI components you need to check the API for each component to define the object you pass to makeStyles, in this case, the date picker component is a group of other MUI components, if you go to the API you'll see different props to pass to each individual component. To style the input you pass the classes returned by the useStyle hook in InputProps, with root rule as it is in the Input API, apply other rules if you need more specific styles.

const useInputStyles = makeStyles({ root: { width: (props) => (props.width ? props.width : "auto"), color: (props) => (props.color ? props.color : "inherit"), verticalAlign: "middle", fontSize: "12px", border: "solid 2px #0070D8" } }); ... const inputClasses = useInputStyles() ... <KeyboardDatePicker ... InputProps={{ classes: inputClasses }} />

and to style the "board", not sure if you mean the popover, since you use the inline variant, you pass the styles in the PopoverProps, defining the styles in the paper rule as described in the Popover API

const usePopoverStyles = makeStyles({ paper: { backgroundColor: "green" } }); ... const popoverClasses = usePopoverStyles(); ... <KeyboardDatePicker ... PopoverProps={{ classes: popoverClasses }} />

you can see it working here https://codesandbox.io/s/mui-keyboarddatepicker-styles-sueqd?file=/src/App.tsx