只是在 Mui-React 包装器组件中声明 useStyles 会产生奇怪的行为

Question

我在所有组件中都使用了 mui makeStyles。

但是当我尝试在包装器组件中使用它时，出现了意外行为

我使用的代码是这样的：

import Box from '@mui/material/Box';
import React from 'react';
import NavBar from './NavBar';
import SwipeableLeftDrawer from './SwipeableLeftDrawer';
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
    text: {
        marginTop: 0
    }
}));

const WrapperComponent = ({ render }) => {
    // const classes = useStyles(); // If I uncomment this line, I start to have problems
    const [ drawerOpen, setDrawerOpen ] = React.useState(false);

    return (
        <Box>
            <SwipeableLeftDrawer
                open={drawerOpen}
                setDrawerOpen={setDrawerOpen}
                drawerWith={'10em'}
                //
            />
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    width: '100vw',
                    height: '100vh'
                }}
            >
                <NavBar setOpenDrawer={setDrawerOpen} /> // <=== HERE, SOME STYLINGS CEASE TO WORK
                <Box>{render()}</Box> // here, I render the wrapped component
                ...
                ...

这就是我现在拥有的，

如果我只声明常量类 = useStyles，即使不使用它，我也会得到：

有人能告诉我我错过了什么吗？

提前致谢

拉斐尔

Answer 1

不要使用 sx props 在 mui v5 样式中使用 makeStyle

只是在 Mui-React 包装器组件中声明 useStyles 会产生奇怪的行为

just declaring useStyles in a Mui-React wrapper component, produces strange behaviors

reactjs

material-ui

usestyles