如何在没有ThemeProvider的情况下使用MUI v5 Make Styles？ [英] How to use MUI v5 makeStyles without ThemeProvider?

问题描述

我有一个styles.tsx文件，因为我不想在组件中放置样式：

//styles.tsx

import {grey, purple} from '@mui/material/colors';
import {styled, Theme} from '@mui/material/styles';
import {createStyles, makeStyles} from '@mui/styles';

export const drawerStyles = makeStyles((theme: Theme) =>
  createStyles({
    logo: {
      'fontSize': '2em',
      'fontFamily': 'Oleo Script Swash Caps',
      'background': 'transparent',
      'border': 'none',
      'marginLeft': theme.spacing(1),
      'width': '41px',
      'overflow': 'hidden',
      'transition': 'all 0.1s ease-out',
      'cursor': 'pointer',
      '&:hover': {
        color: purple[700],
      },
    },
    slide: {
      paddingLeft: '8px',
      width: '100%',
    },
  }),
);

在另一个组件中，我导入了drawerStyles：

// drawerContainer.tsx

import {drawerStyles} from 'Src/styles';

export const DrawerContainer = () => {
  const classes = drawerStyles();

  return (
    <Box className={`${classes.logo}>
      <p>some text</p>
    </Box>
  )

代码已编译，但浏览器返回错误：

MUI：提供的styles参数无效。您提供的函数在上下文中没有主题。其中一个父元素需要使用ThemeProvider。

在我的index.tsx上，我使用ThemeProvider：

// index.tsx

import {ThemeProvider, StyledEngineProvider} from '@mui/material/styles';
import {theme} from 'Src/theme';

  const Root = () => {
    return (
      <ApolloProvider client={client}>
        <StyledEngineProvider injectFirst>
          <ThemeProvider theme={theme}>
            <CssBaseline>
              <App />
            </CssBaseline>
          </ThemeProvider>
        </StyledEngineProvider>
      </ApolloProvider>
    );
  };

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

我认为问题是因为styles.tsx不在index.tsx范围内。因此，当浏览器加载文件时，它没有ThemeProvider上下文。

我应该只移动组件中的所有样式吗？还是有别的办法？

//编辑//

使用样式化API创建样式：

// styles.tsx

export const Logo = styled(Box)(({theme}) => ({
  'fontSize': '2em',
  'fontFamily': 'Oleo Script Swash Caps',
  'background': 'transparent',
  'border': 'none',
  'marginLeft': theme.spacing(1),
  'width': '41px',
  'overflow': 'hidden',
  'transition': 'all 0.1s ease-out',
  'cursor': 'pointer',
  '&:hover': {
    color: purple[700],
  },
}));

// DrawerContainer.tsx

  <Link data-cy='btn_home' to='/'>
    <Logo component='button'>Movieseat</Logo>
  </Link>

我有点不喜欢这种语法，不清楚Logo是什么类型的对象。

推荐答案

有关详细信息，请参阅this答案。简而言之，makesStyles/withStyles不再是MUI v5中的第一类API，计划在v6中移除。如果使用旧API，则必须自行添加主题。

在v4中，您可以import makeStyles从@material-ui/core/styles开始，而不必提供自定义主题。您可以在v5中执行相同的操作，但仅限于所有MUI组件在内部使用的with the new styled API。

这篇关于如何在没有ThemeProvider的情况下使用MUI v5 Make Styles？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！