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

Mag*_*nus 3 javascript reactjs styled-components next.js

来自Next.js 文档

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

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

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

问题

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

小智 7

我会尽力回答你的问题。

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

希望能帮助到你。