material-ui /使用material-ui拾取器切换暗模式

Question

我正在使用@material-ui/core和@material-ui/pickers和moment，您可以在此沙箱中看到它：https://codesandbox.io/s/amazing-stallman-z8yyj?file=/src/App.js

您可以看到我正在将ThemeProvider用于黑暗模式（请参阅https://material-ui.com/customization/palette/#user-preference）

我通过打开和关闭按钮来切换黑暗模式，它工作正常。

但是我想使用MobileDateRangePicker（请参阅https://v4-0-0-alpha-7.material-ui-pickers.dev/demo/daterangepicker）。日期选择器工作正常。

如果您在ThemeProvider中发表评论，则日期选择器不再起作用。

任何人都知道怎么了？

与组件useAppTheme.js有关。因为当我将此组件包含到App.js中时，它的工作原理如下：

import React, { useMemo, useState, StrictMode } from "react";
import DateFnsAdapter from "@material-ui/pickers/adapter/moment"; // choose your lib
import {
  MobileDateRangePicker,
  DateRangeDelimiter,
  LocalizationProvider
} from "@material-ui/pickers";
import { TextField } from "@material-ui/core";

import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";

import useMediaQuery from "@material-ui/core/useMediaQuery";

function App() {
  const [selectedDate, handleDateChange] = React.useState([null, null]);

  const [toggled, toggle] = useState(false);
  const toggleTheme = () => toggle(!toggled);

  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
  const darkMode = !toggled ? prefersDarkMode : !prefersDarkMode;
  const theme = useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: darkMode ? "dark" : "light",
          primary: {
            main: "#000000"
          },
          secondary: {
            main: "#e10707",
            contrastText: "#ffffff"
          }
        }
      }),
    [darkMode]
  );

  return (
    <StrictMode>
      <ThemeProvider theme={theme}>
        <LocalizationProvider dateAdapter={DateFnsAdapter}>
          <MobileDateRangePicker
            startText="Mobile start"
            value={selectedDate}
            onChange={date => handleDateChange(date)}
            renderInput={(startProps, endProps) => (
              <>
                <TextField {...startProps} />
                <DateRangeDelimiter> to </DateRangeDelimiter>
                <TextField {...endProps} />
              </>
            )}
          />
        </LocalizationProvider>
        <button onClick={toggleTheme}> Toggle Theme </button>
      </ThemeProvider>
    </StrictMode>
  );
}

export default App;

所以我为什么不能将其排除在组件之外？

Answer 1

这是解决方法

但是我现在知道了>

警告：findDOMNode在StrictMode中已弃用。 findDOMNode传递了StrictMode内部的Transition实例。而是直接将引用添加到要引用的元素。在此处了解有关安全使用裁判的更多信息：https://.../react-strict-mode-find-node