MUI KeyboardDatePicker change styles of date input box

user_3727758 0
Viewed 2018

Currently, I am trying to modify KeyboardDatePicker board color, size, font, padding, but unfortunately, all approaches don’t work. I tried so far:

1 . useStyles :

const useStyles = (params: any) =>
  makeStyles(() =>
    createStyles({
      componentStyle: {
        width: params.width ? params.width : 'auto',
        color: params.color ? params.color : 'inherit',
        verticalAlign: 'middle',
        fontSize: '12px',
        border: 'solid 2px #0070D8',
      },
    })
  );

Doesn’t override and a border appears on current KeyboardDatePicker border, size doesn’t change as well.

2 . Theme provide, it overrides calendar theme, but not KeyboardDatePicker date box.

<ThemeProvider theme={theme}>

3 . Add styles into KeyboardDatePicker, it is the only working approach

style={{width:"246px",height:"44px"}}

How would you suggest modifying styles of KeyboardDatePicker, and yes style={} approach it's not the correct way to changes styles. p.s I am using Material-UI 4

My KeyboardDatesPicker:

    <KeyboardDatePicker
      format="MM/dd/yyyy"
      margin="normal"
      id="date-picker-inline"
      defaultValue={props.value}
      value={selectedDate}
      required={props.required}
      showTodayButton={true}
      disableToolbar
      inputVariant="outlined"
      variant="inline"
      onChange={(selectedDate) => setSelectedDate(selectedDate)}
      KeyboardButtonProps={{
        "aria-label": "change date",
      }}
      keyboardIcon={<Icon icon={ICONS.Cool_icon} />}
      className={classes.componentStyle} // do not overide , but puts on top
    />
material-ui reactjs date css styles
2 Answers

makeStyles is a hook factory that returns a style hook (usually called useStyles), this is how it's used:

const useStyles = makeStyles(...);

In your code, you define useStyles as a function that return makeStyles instead of telling makeStyles to create a new hook which doesn't make sense here, so change your code to the above. I also fixed the styles for you. The text color styles should be placed in InputBase component:

const useStyles = makeStyles(() =>
  createStyles({
    componentStyle: {
      verticalAlign: "middle",
      fontSize: "12px",
      width: (params) => (params.width ? params.width : "auto"),

      "& fieldset": {
        border: "solid 2px #0070D8"
      },
      "& .MuiInputBase-root": {
        height: (params) => (params.height ? params.height : "auto"),
        color: (params) => (params.color ? params.color : "inherit")
      }
    }
  })
);

const classes = useStyles({
  color: "red",
  width: 400,
  height: 80,
});

<KeyboardDatePicker
  onChange={() => {}}
  inputVariant="outlined"
  InputProps={{
    className: classes.componentStyle
  }}
/>

If you want to style via createMuiTheme, here is the equivalent code. Note that you can't pass the component props to create dynamic styles unlike the useStyles approach above:

const theme = createMuiTheme({
  overrides: {
    MuiTextField: {
      root: {
        verticalAlign: "middle",
        fontSize: "12px",
        width: 150,
        "& fieldset": {
          border: "solid 2px #0070D8"
        }
      }
    }
  }
});

And it should work again. For reference, see this section to know how you can use makeStyles with component props.

Codesandbox Demo

user_94494260

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

user_18680080
Related