如何在Next.js应用中创建页面特定的CSS块？

Question

我有一个React.js应用，该应用完全在客户端上渲染。 现在，我已将其迁移到Next.js以使其同构。 之前我对每个页面都有不同的css块，这些块仅在根据所加载的页面需要它们时才被加载。 但是在Next.js中，我得到了一个样式块，所有页面都相同。结果，一页的CSS属性被另一页的不同属性覆盖。 如何更改此行为，以便每个页面都有不同的CSS块？

例如- 在componentA-

import '../css/componentA.css';

在componentB-

import '../css/componentB.css';

现在，两个css文件都正在styles.css中合并。如果两个文件中都有相同的选择器，它将被覆盖。 我不希望那样发生。

Answer 1

从NextJS文档中：

  

Next.js在JS框架中styled-jsx中预加载了CSS，该CSS专门用于使您的生活更轻松。它允许您为组件编写熟悉的CSS规则。规则对组件（甚至子组件）以外的任何东西都没有影响。

请注意：规则除组件（甚至子组件）之外，对其他任何东西都没有影响。

它非常易于使用。在样式组件下检查网站（https://nextjs.org/learn/basics/getting-started）。