更改 Material UI 的 KeyboardDatePicker 的 Button 变体答案

【问题标题】：Changing the Button variant of KeyboardDatePicker of Material UI更改 Material UI 的 KeyboardDatePicker 的 Button 变体
【发布时间】：2021-03-04 10:29:01
【问题描述】：

我创建了一个带有 Material UI 的网站，其中所有按钮都是“概述”的变体。除了在 KeyboardDatePicker 的日历中。在此对话框中，“确定”和“取消”按钮采用标准外观。

我没有在 api (https://material-ui-pickers.dev/api/KeyboardDatePicker) 中找到任何用于更改按钮变体的道具。

还有其他方法吗？

【问题讨论】：

标签： reactjs datepicker material-ui

【解决方案1】：

似乎（我发现）将自定义样式应用于 KeyboardDatePicker 按钮的唯一方法是在 ThemeProvider 中覆盖 MuiButton 的样式。

Here 一个工作示例。

基本上你必须：

将KeyboardDatePicker 包裹在ThemeProvider 中，例如：

<ThemeProvider theme={muiTheme}>
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
   <DatePicker />
 </MuiPickersUtilsProvider>
</ThemeProvider>

以这种方式使用createMuiTheme 创建一个muiTheme：

const muiTheme = createMuiTheme({
  overrides: {
    MuiButton: {
      textPrimary: {
        border: "1px solid rgba(0, 0, 0, 0.23)",
        padding: "5px 15px"
      }
    }
   }
 });

就是这样。结果是：

注意：通过这种方式，您将覆盖您在应用程序中使用的所有MuiButtons（但因为您说您使用的按钮无处不在，所以您不应该成为问题）。

【讨论】：

【解决方案2】：

借鉴@Giovanni Esposito 的想法，您可以使用主题从主按钮中编辑或删除样式，并使用接受自定义组件的 okLabel 和 cancelLabel 嵌套您自己的按钮：

import {
  Button,
  createTheme,
  ThemeProvider,
} from "@material-ui/core";

import {
  KeyboardDatePicker,
  MuiPickersUtilsProvider,
} from "@material-ui/pickers";

import DateFnsUtils from "@date-io/date-fns";

const MuiPickersTheme = createTheme({
  ...appThemeOptions,
  overrides: {
    ...(appThemeOptions.overrides || {}),
    MuiButton: {
      textPrimary: {
        padding: "0",
      },
    },
  },
});

const CustomDatePicker = (props) => {
  return (
    <ThemeProvider theme={MuiPickersTheme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          {...props}

          cancelLabel={
            <Button color="default" disableElevation>
              Cancel
            </Button>
          }

          okLabel={
            <Button color="secondary" variant="contained" disableElevation>
              Apply
            </Button>
          }
        />
      </MuiPickersUtilsProvider>
    </ThemeProvider>
  );
};

export default CustomDatePicker;

请注意，这可能不是最佳性能；见https://v4.mui.com/customization/theming/#a-note-on-performance

【讨论】：