如何在 Next.js 13 应用程序文件夹中使用 StyledComponents？

Question

来自Next.js 文档：

警告：服务器组件当前不支持需要运行时 JavaScript 的 CSS-in-JS 库。

应用程序目录中的客户端组件支持以下库：

• styled-jsx
• 样式组件
• 风格9

问题

1. 这是否意味着我必须use-client在每个使用StyledComponents 的组件中使用该指令？
2. 如果是这样，是否可以将所有StyledComponent写入一个文件中，并将use-client指令放在顶部，然后根据需要将这些客户端组件导入到服务器组件中？
3. 上述方法是否会以某种方式将服务器组件转变为客户端组件？
4. Next.js 文档声明目录中的所有组件默认app都是服务器组件。如果我们在目录外保存一个组件app并将其导入到该目录中的服务器组件app中，那么该导入的函数是否也会成为服务器组件？

Answer 1

我会尽力回答你的问题。

1. 是的，每次使用 StyledComponents 时都必须使用它。
2. 这是可能的，但 Next.js 会将其呈现为客户端组件，即使您将其导入到服务器组件中也是如此。
3. 从文档来看，如果您尝试渲染的页面都是带有“use client”指令的组件，它将使该组件成为客户端组件。如果页面中有任何服务器组件，Next.js 将在服务器端渲染它，并将其余组件发送到客户端。
4. 是的，只要导入的组件不使用“use client”指令，它就会成为服务器组件。

希望能帮助到你。