Импорт объекта темы Dynami c MaterialUI из отдельного файла?

Question

Может ли кто-нибудь помочь мне понять правильный синтаксис, позволяющий импортировать объект темы Dynami c из отдельного файла?

Я пытаюсь получить системную тему из медиа-запроса, а затем установить тема динамически.

Это отлично работает, если я оставлю все в основной функции приложения следующим образом: 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

Код на будущее: рабочий код, но Я хочу провести рефакторинг, чтобы объекты темы и медиа-запроса находились за пределами компонента приложения:

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
}

Answer 1

Думаю, вам не хватает export default в 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
}