Javascript 从单独的文件导入动态MaterialUI主题对象？

有人能帮我理解允许从单独文件导入动态主题对象的正确语法吗

我试图从媒体查询中获取系统主题，然后动态设置主题

如果我将所有内容都保留在主应用程序功能中，则效果良好，如下所示：

但在下面的示例中，我希望将其分解为不同的文件以供组织使用，但我的尝试失败了，我得到了错误：

themeProvider\u js\u 1。默认值不是函数

坏例子：

这是重构的第二次尝试，没有错误，我可以在控制台日志中看到ThemeObject，但没有应用系统主题：

未来守则： 正在运行的代码，但我想重构它，以便主题和媒体查询对象位于应用程序组件之外：

import React from 'react';
import { render } from 'react-dom';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return (
    <ThemeProvider theme={theme}>
    <CssBaseline/>
        <p>
          Start editing to see some magic happen :)
        </p>
    </ThemeProvider>
  );
}

render(<App />, document.getElementById('root'));

---

我认为您在

themeProvider.js

export default function themeBuilder() {

const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');

const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return theme
}

---

这修复了错误，但没有应用正确的颜色主题，如图所示：有什么想法吗？我可以看到它输出不同的布尔值。

丢失了该死的：）。非常感谢。另外，如果您想允许用户以编程方式更改

darkMode

，您必须完全更改方法，因为切换按钮应该存储初始凝视（

prefersDarkMode

vs持久化中的条目），并且每个更改都应该保存在某个地方（即

localstorage

）是的，我也这么认为，我正在朝着那个建筑的方向努力。关于为什么我不能在本地代码中使用这些Stackblitz示例，有什么想法吗？我得到的错误是mediaQuery函数需要位于react组件中：

第7:25行：react钩子“useMediaQuery”在函数“themeBuilder”中调用，该函数既不是react函数组件，也不是自定义react钩子函数

我使用的是与示例中完全相同的themeBuilder。。

import React from 'react';
import { createMuiTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';

function themeBuilder() {

const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');

const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return theme
}

export default function themeBuilder() {

const prefersDarkMode = useMediaQuery('(prefers-color-scheme)');

const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return theme
}