javascript - Material UI - cannot override DatePicker style using makeStyles - Stack Overflow

admin管理员组

文章数量:1404351

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:
=/demo.js

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

• javascript
• css
• reactjs
• material-ui
• mui-x-date-picker

Share Improve this question Follow edited Mar 28 at 10:27 Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Sep 8, 2021 at 4:07 CCCCCCCC 6,5211010 gold badges6161 silver badges144144 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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

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-ponent classes api to override stylesheets for any particular ponent. 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

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.

本文标签： javascriptMaterial UIcannot override DatePicker style using makeStylesStack Overflow