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

Question

来自Next.js文档：

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

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

• styled-jsx
• styled-components
• style9

问题

1. 这是否意味着我必须在每个使用 StyledComponents 的组件中使用 use-client 指令？
2. 如果是这样，是否可以将所有的 StyledComponents 写在一个文件中，在顶部加上 use-client 指令，然后根据需要将这些 Client Components 导入到 Server Components 中？
3. 上述方法是否会将 Server Components 转换为 Client Components？
4. Next.js 文档指出，app 目录中的所有组件默认都是 Server Components。如果我们将一个组件保存在 app 目录之外，并将其导入到 app 目录中的 Server Component 中，那么该导入函数是否也会成为 Server Component？

- Magnus

Answer 1

我会尽力回答你的问题。

1. 是的，每次使用StyledComponents都需要使用它。
2. 虽然你在Server Component中导入它，但是它仍然可能被Next.js渲染为Client Component。
3. 从文档中可以得知，如果你要渲染的页面中所有组件都带有"use client"指令，那么这个组件就会变成Client Component。如果页面中有任何Server Component，则Next.js将在服务器端呈现它们，并将其余部分发送到客户端。
4. 只要导入的组件没有使用"use client"指令，它就会变成Server Component。

希望能帮到你。

- IceFox_23