问是否从单独的文件导入动态MaterialUI主题对象？
EN

Stack Overflow用户

提问于 2020-06-20 19:19:56

回答 1查看 666关注 0票数 3

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

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

如果我将所有内容都保留在主应用程序函数中，就可以正常工作，如下所示：https://stackblitz.com/edit/theme-builder-working-all-in-one?file=index.js

但是在下面的例子中，我想把它分解成不同的文件来组织，但是我的尝试失败了，我得到了错误：themeProvider_js_1.default is not a function

坏掉的例子：https://stackblitz.com/edit/theme-builder-broken?file=index.js

这是重构的第二次尝试，没有错误，我可以在控制台日志中看到ThemeObject，但没有应用系统主题：https://stackblitz.com/edit/theme-builder-broken-btyufg?file=index.js

未来的代码:工作代码，但我想重构它，这样主题和媒体查询对象就在App组件之外：

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'));

失败的重构尝试：

应用程序组件

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 themeBuilder from './themeProvider.js'

function App() {

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

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

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
}

material-ui

javascript

reactjs

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天

回答 1

Stack Overflow用户

发布于 2020-06-20 20:08:12

我想你在themeProvider.js错过了export default

export default function themeBuilder() {

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

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

  return theme
}