如何从Material-UI自定义DateTimePicker

Question

我正在尝试从DateTimePicker中自定义Material-UI。这是其文档：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: {},
}));

基于研究，阅读文档和一些答案，这就是我一直试图使用此库对组件进行样式设置的方式：

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库等。这可能吗？ CSS样式在哪里？

我已经用我尝试过的方法准备了一个沙箱：

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

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

Answer 1

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

-webkit-appearance: none;

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

也请检查其他-webkit- []函数...有些函数可以用于更特定的元素，例如边框，颜色等...

希望这会有所帮助:)