如何从 Material-UI 自定义 DateTimePicker答案

【问题标题】：How to customise DateTimePicker from Material-UI如何从 Material-UI 自定义 DateTimePicker
【发布时间】：2020-03-08 08:18:00
【问题描述】：

我正在尝试从 Material-UI 自定义 DateTimePicker。这是它的文档：https://material-ui-pickers.dev/api/DateTimePicker

没有样式部分。我想更改所有彩色组件的主要颜色。到目前为止，我尝试的是使用通用的theme 文档并尝试更改主题的样式：

const theme = createMuiTheme({
  status: {
    danger: '#FF72B1',
  },
  dateTimePicker: {
    headerColor: '#FF72B1',
    selectColor: '#FF72B1',
  },
  datePicker: {
    selectColor: '#FF72B1',
    headerColor: '#FF72B1'
  }
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Routes />
    </ThemeProvider>
  )
}

据我从theme 文档中了解到的，到目前为止我所做的唯一一件事就是用样式定义变量，但它们不会被应用。我必须在确切的组件中指定它们，这是棘手的部分。

在我的Material-UI DateTimePicker：

function MaterialDateTimePicker() {
  const classes = useStyles()
  return (
    <Fragment>
      <DateTimePicker
        label={label}
        inputVariant="outlined"
        value={value}
        onChange={onChange}
        classes={{
          root: classes.root,
          checked: classes.checked,
        }}
      />
    </Fragment>
  );
}

我已尝试应用样式：

const useStyles = makeStyles(theme => ({
  root: {
    color: '#FF72B1',
    backgroundColor: 'orange',
    '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
      backgroundColor: 'green'
    }
  },
  checked: {},
}));

这就是我根据研究、阅读文档和一些 SO 答案尝试使用这个库设置组件样式的方式：

How to change material UI select border and label

所以基本上你必须去文档，尝试找到与你要自定义的组件匹配的 .XXX 类，如果缺少文档，你必须去 DOM，并开始寻找这个类.

我这样做了，但我有几个问题：

1) 在我的特殊情况下，我遇到的问题是在我的DateTimePicker 上应用了root 类，这些类位于input 组件级别。弹出的日历，不是这个组件的子组件，是javascript打开的，所以不知道怎么访问。

此语法不再适用：

root: {
    color: '#FF72B1',
    backgroundColor: 'orange',
    '& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
      backgroundColor: 'green'
    }
  },

因为root是输入，而不是弹出的日历。

2) 这真的是这个库的方法吗？因为关于 SO 和抱怨的所有答案都朝着这个方向发展。有人知道另一种策略吗？

3) 在 @material-ui/pickers node_modules 文件夹中我找不到 css 文件。我想选择它并在那里定制，就像react-dates library 等可能的那样。这可能吗？ css 样式在哪里？

我已经用我尝试过的东西准备了一个沙盒：

https://codesandbox.io/s/inspiring-napier-zh4os

（不幸的是 utils 库已安装但无法正常工作，在我的计算机本地选择器工作正常，我只是无法设置它的样式）

【问题讨论】：

标签： css reactjs material-ui datetimepicker

【解决方案1】：

我现在正在处理这个问题，我所做的部分覆盖样式是包装在 ThemeProvider 中（你可以将你的主题传递给你的组件）

 <MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
  <Grid container justify="space-around">
    <ThemeProvider theme={defaultMaterialTheme}>
      <KeyboardDatePicker
        ...
      />
    </ThemeProvider>
  </Grid>
</MuiPickersUtilsProvider>

你的主题可能是这样的

import { createMuiTheme } from '@material-ui/core'

const defaultMaterialTheme = createMuiTheme({
  overrides: {
    MuiPickersCalendarHeader: {
      switchHeader: {
        color: '#6A148E',
        textTransform: 'uppercase',
      },
      dayLabel: {
        textTransform: 'uppercase',
      },
    },
    MuiPickersDay: {
      day: {
        color: '#707070',
      },
      daySelected: {
        backgroundColor: '#6A148E',
        '&:hover': {
          backgroundColor: '#6A148E',
        },
      },
      current: {
        color: '#6A148E',
      },
    },
    MuiSvgIcon: {
      root: {
        fill: '#6A148E',
      },
    },
    MuiOutlinedInput: {
      root: {
        '&:hover': {
          border: '10px solid red !important', // i'm struggling with this :/
        },
      },
    },
   
  },
})

export default defaultMaterialTheme

希望对你有帮助

【讨论】：

【解决方案2】：

我认为你只需要取消 webkit 的外观。有几种方法可以取消特定的 webkit 样式（因此您可以添加自己的样式）。请尝试以下操作：

-webkit-appearance: none;

ReactJS 内联样式：webkitAppearance: "none";

还可以查看其他 -webkit-[] 函数...还有一些函数可用于更具体的元素，例如边框、颜色等...

希望这会有所帮助:)

【讨论】：