如何在nextJS中覆盖全局样式

Question

我的global.css文件中有一些css规则，如何为特定页面覆盖这些样式？

Answer 1

NextJs与样式化的jsx捆绑在一起。您可以利用这个库在页面中插入css规则，这可以覆盖全局css文件设置的规则。

export default () => (
<div>
<style jsx global>{`
body {
background: red;
}
`}</style>
</div>
)

Answer 2

只需在页面的顶层元素中创建一个类或id。完成后，通过使用页面的选择器指定新样式来覆盖所需的样式。通过这样做，样式将比全局css规则更具体，因此全局css规则将被覆盖。

请参阅下面的示例。

// global.css
p {
font-size: 1.2rem;
}
// Style to load on the page that has a top level selector of #landing-page.
#landing-page p {
font-size: 2rem;
}

另一种选择是使用按页面级别定义的布局组件，并在需要时加载其中的全局样式。签出此链接。