Как использовать объект темы с makeStyles без ThemeProvider в пользовательском интерфейсе материала?

Question

У меня есть настраиваемый объект темы, настроенный следующим образом:

import palette from './palette';
import typography from './typography';


const theme = createMuiTheme({
  palette,
  typography,
}));

export default theme;

В MUI useStyles() может напрямую обращаться к theme, когда компонент заключен в <ThemeProvider>.

import theme from "../src/themes/index";

<ThemeProvider theme={theme}>
   <Button/>
</ThemeProvider>

Но вместо этого я хотел бы импортировать theme, а затем напрямую передать его makeStyles(), но пока мне не повезло. Как решить эту проблему?

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import theme from "../src/themes/index";

const useStyles = makeStyles((theme) => ({
(...)
});

const Button = () => {
    const classes = useStyles();
    (...)
}

Answer 1

Это не лучший вариант, но он работает:

const useStyles = theme => {
  return makeStyles(() => ({
  (...)
  })
}

// and use it this way:

const classes = useStyles(theme)() 

Вы можете использовать вложенный ThemeProvider в Material-UI, поэтому я думаю, что это будет лучший выбор в вашем случае.