挂钩API样式未加载？

Question

该项目正在使用Next.js和material-ui构建。我已经使用了Hook API方法对组件进行样式设置，但是样式并不总是加载。当我运行next dev进行测试时，我的样式不会加载。如果我在当前正在渲染的页面中编辑任何内容，它将重新加载，但是这次使用样式。但是，如果单击“重新加载”，样式将无法再次加载。我一直在寻求帮助，但找不到任何能解决问题的方法。我看到了将material-ui/core与material-ui/styles一起使用的一些注意事项，但这全都与v3有关，并且不能解决我遇到的问题。

以下是其中的页面之一：

import Nav from '../components/nav';
import Footer from '../components/footer';
import Product from '../components/product';
import { makeStyles, ThemeProvider } from '@material-ui/core/styles';
import theme from '../components/customTheme';

import {
    Typography,
    Button
} from '@material-ui/core';

const useStyles = makeStyles({
    body: {
        margin: '15vh  0',
        backgroundColor: ' white',
        textAlign: 'left'
    },
    earnWrapper: {
        display: 'block',
        textAlign: 'left',
        backgroundColor: 'white',
        width: '80%',
        margin: '5% 2vh',
        padding: '5%',
        borderRadius: '25px',
        transition: '0.3s',
        boxShadow: '0px 5px 20px #dedede'
    },
    earnContent: {
        textAlign: 'left',
        display: 'inline-block'
    },
    earntCaption: {
        color: 'grey',
    },
    earntAmount: {
        margin: '1vh  0 2vh'
    },
    shareInfo: {
        margin: '5%  2vh',
        textAlign: 'left'
    }, 
    products: {
        textAlign: 'center ',
        width: '100%'
    }
});

export default function Home(props) {
    const styles = useStyles();

    return (
        <ThemeProvider theme={theme}>

            <DefaultHead
            title="Oorigin | Home"
            />

            <Nav isLoggedIn={true} />

            <div className={styles.body}>
                <div className={styles.earnWrapper}>
                    <div className={styles.earnContent}>
                        <Typography className={styles.earntCaption} variant="caption">You've earned</Typography>
                        <Typography className={styles.earntAmount} variant="h4">S$18.50</Typography>
                        <Button disableElevation variant="contained" color="primary">Withdraw</Button>
                    </div>
                </div>
                <div className={styles.shareInfo}>
                    <Typography><b>Shop, Share, Earn</b></Typography>
                    <Typography><br/>Shop products you like, share products you love, and earn up to 10% commission on every qualifying sale you refer</Typography>
                </div>
                <div className={styles.products}>
                    <Product
                    imgURL="../TestItem1.svg"
                    imgAlt="Test Product"
                    title="Disinfecting Air Purifying Solution"
                    price={(22.80).toFixed(2)}
                    link="/products/staticProduct"
                    />
                    <Product
                    imgURL="../TestItem2.svg"
                    imgAlt="Test Product"
                    title="Disinfecting Air Purifying Solution"
                    price={(22.80).toFixed(2)}
                    />
                    <Product
                    imgURL="../TestItem3.svg"
                    imgAlt="Test Product"
                    title="Disinfecting Air Purifying Solution"
                    price={(22.80).toFixed(2)}
                    />
                    <Product
                    imgURL="../TestItem4.svg"
                    imgAlt="Test Product"
                    title="Disinfecting Air Purifying Solution"
                    price={(22.80).toFixed(2)}
                    />
                </div>
            </div>

            <Footer/>


        </ThemeProvider>
    );
}