如何在 Next.js 服务器组件中使用 Material-ui 风格的组件

Question

我正在将 Next.js 版本 14 与应用程序路由器以及 Material-UI v5 一起使用。

每当我在服务器页面组件中渲染 Material-UI 组件时，它都工作得很好。当我尝试使用 @mui/material 包中的

styled

函数设置这些组件的样式时，问题就开始了。

我正在使用引擎盖下的情感引擎作为 MUI 的引擎，正如您在此处看到的： “Material UI 使用 Emotion 作为其默认样式引擎。”

我在浏览器上看到的问题是：

“错误：尝试从服务器调用 styled()，但 styled 位于客户端。无法从服务器调用客户端函数，它只能呈现为组件或传递给客户端组件的 props。”

我正在使用的相关软件包的版本：

"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.15",
"@mui/material-nextjs": "^5.15.11",
"next": "14.2.1",
"react": "18.2.0",
"react-dom": "18.2.0",

谢谢您的帮助。

Answer 1

我不知道这是否是推荐的方法，但从我读到的内容来看，您应该在任何需要它的子组件的顶部添加一个“使用客户端”。例如，如果您有一个样式化组件，请将其分离到自己的文件中并添加“使用客户端”。父页面仍然可以使用 SSR，但将客户端组件加载到其中。

至少它会解决您提到的使用 MUI 或 Emotion 样式的错误。

示例：

'use client'
import { Button } from '@mui/material'
import { styled } from '@mui/material/styles'

export const MainButton = styled(Button)`
  width: 200px;
`