如何在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预装了一个名为styled-jsx的 JS框架中的CSS，专为让您的生活更轻松而设计。 它允许您为组件编写熟悉的CSS规则; 规则不会对组件以外的任何内容产生影响（甚至不包括子组件）。

请注意： 规则不会对组件以外的任何内容产生影响（甚至不包括子组件）。

这是非常容易使用。 检查样式组件下的站点（ https://nextjs.org/learn/basics/getting-started ）。