makeStyles is a function that creates a style hook (usually referred to as useStyles). Here's how you should use it:

const useStyles = makeStyles(...);

In the given code snippet, you need to define useStyles as a function that returns makeStyles, instead of attempting to create a new hook. This change is necessary for correct functionality. I have also corrected the styles for you. The text color styles should be specified within the 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 prefer styling via createMuiTheme, here is an alternative code snippet. Keep in mind that creating dynamic styles based on component props is not supported in this method compared to using useStyles:

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

By implementing these changes, your code should work as intended. For more insights, refer to this section on how to effectively use makeStyles with component props.

https://codesandbox.io/s/69608311-react-mui-keyboarddatepicker-change-styles-of-date-input-box-8mnhq?file=/demo.tsx

If you find yourself needing to create a custom hook like

useStyles = (params: any) => ...

, it's important to note that the hook provided by makeStyles already accepts a props parameter.

When styling Material-UI components, it's crucial to reference the API documentation for each component in order to determine the object structure required by makeStyles. For instance, the date picker component consists of multiple nested MUI components, each with their own set of props. To style the input within the datepicker, you would include the classes returned by the useStyle hook in InputProps, adhering to the root rule as outlined in the Input API, and adding additional rules for more specific styles if necessary.

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 }}
      />

If you're looking to style the "board" (potentially referring to the popover), especially when using the 'inline' variant, you can apply styles through PopoverProps by specifying the styles within the paper rule as indicated in the Popover API.

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

To see these styling techniques in action, check out this example here.

My implementation in TypeScript is still a work in progress, but I believe it can be helpful to others. I plan on incorporating MuiFormLabel-root to customize the label styling further.

const useDatePickerStyles = makeStyles<ITheme, ITextFieldStyleProps>((theme) =>
  createStyles({
    datePickerContainer: ({ isValid, isError }) => ({
      border: 'solid',
      borderRadius: 4,
      borderWidth: theme.mvf.border.width.thin,
      borderColor: theme.mvf.palette.border,
      ...(!isError && {
        '&:hover': {
          boxShadow: theme.mvf.boxShadow.primary,
          borderColor: theme.mvf.palette.primary.main,
        },
        ...(isValid && {
          color: theme.mvf.palette.primary.main,
          boxShadow: theme.mvf.boxShadow.primary,
          borderColor: theme.mvf.palette.primary.main,
        }),
      }),
      ...(isError && {
        color: theme.mvf.palette.error,
        boxShadow: theme.mvf.boxShadow.error,
        borderColor: theme.mvf.palette.error,
      }),
    }),
    datePicker: () => ({
      margin: theme.mvf.spacing.small,
    }),
 }),
);

export default useDatePickerStyles;

To access classes:

const DatePicker: DatePickerType = ({
  id,
  onChange,
  format,
  value,
  label,
  errorMessage,
  placeholder,
  isVerticallyCentered,
  ...props
}: IDatePickerProps) => {
  const isValid = !errorMessage && !!value;

  const classes = useDatePickerStyles({
    isError: !!errorMessage,
    isVerticallyCentered,
    isValid,
  });

  return (
    <div className={classes.datePickerContainer}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          id={id}
          fullWidth
          maxDateMessage={''}
          minDateMessage={''}
          invalidDateMessage={''}
          className={classes.datePicker}
          label={isVerticallyCentered ? undefined : label} // don't show as label will be outside
          placeholder={placeholder}
          format={format} // of the displayed date
          emptyLabel={placeholder} // displayed value if empty
          name="datePicker"
          InputLabelProps={{
            className: classes.inputLabel,
          }}
          margin="normal"
          value={value}
          onChange={onChange}
          InputProps={{
            className: classes.inputPropsClasses,
            inputProps: { className: classes.textInput },
            disableUnderline: true,
          }}
          inputVariant="standard"
          KeyboardButtonProps={{
            className: classes.calendarButton,
          }}
          {...props}
        />
      </MuiPickersUtilsProvider>
    </div>
  );
};