Material-UI (mui) 自定义样式 (makeStyles) 不适用于 next.js？答案

【问题标题】：Material-UI (mui) custom styles (makeStyles) not working with next.js?Material-UI (mui) 自定义样式 (makeStyles) 不适用于 next.js？
【发布时间】：2021-12-29 03:48:51
【问题描述】：

我正在构建一个 next.js 应用程序。我正在使用@mui/material。

对于 next.js，我创建了两个文件夹，一个是 _app.js，另一个是 _document.js。我从mui example 复制代码。我从他们的示例代码中找到了这段代码。

对于_app.js

import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from 'Theme';
import createEmotionCache from 'Emotion';
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <title>My page</title>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  emotionCache: PropTypes.object,
  pageProps: PropTypes.object.isRequired,
};

对于_document.js

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from 'Theme';
import createEmotionCache from 'Emotion';

export default class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name="theme-color" content={theme.palette.primary.main} />
                    <link
                        rel="stylesheet"
                        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
                    />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}
MyDocument.getInitialProps = async (ctx) => {
    const originalRenderPage = ctx.renderPage
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);
    ctx.renderPage = () =>
        originalRenderPage({
            enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
        });
    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
        <style
            data-emotion={`${style.key} ${style.ids.join(' ')}`}
            key={style.key}
            dangerouslySetInnerHTML={{ __html: style.css }}
        />
    ));
    return {
        ...initialProps,
        styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
    };
};

然后在我的组件中，我需要自定义样式。为此，我正在尝试导入 makeStyles。

import { makeStyles } from '@mui/material/styles';

我收到此错误：

从此错误消息中，我尝试从@mui/styles 安装makeStyles（显然我首先安装它）。

然后我尝试使用 makeStyles 进行样式设置

import React from 'react';
import { Button } from "@mui/material";
import { makeStyles } from "@mui/styles";

const index = () => {
    const classes = useStyles();
    return (
        <div>
            <div className={classes.test}>
                Hello world
            </div>
        </div>
    );
};
export default index;

const useStyles = makeStyles({
    test: {
        color: "yellow"
    }
})

但问题是样式不适用。在浏览器控制台中，我收到此类错误消息：

我是 mui 的新手。之前在我的 3 个项目中，我使用了 theme-ui。但是这里我不明白哪里错了。我做所有的事情作为文档。任何人都可以帮助我，谁正在使用 mui 最新版本。（注意：我找到了许多版本 4 的解决方案，而不是我没有获得 mui 5 的任何资源）。请帮帮我。

【问题讨论】：

标签： reactjs material-ui next.js emotion

【解决方案1】：

在 Materi-UI v5 中，不推荐使用 makeStyles，因此您需要使用“sx”来设置 Material-ui 组件的样式。只需添加“sx”作为道具并添加您的样式，您就可以轻松使用您的自定义样式。了解更多信息：访问https://mui.com/system/the-sx-prop/#main-content

【讨论】：