如何修复跨页面泄漏的scs样式

Question

我有一个包含以下文件的项目：

/* styles/1.scss */
body {
/* Some other stuff not related to background-color */
}

/* styles/2.scss */
body {
background-color: blue;
}

// pages/one.js
import "../styles/1.scss";
export default ()=>(
<div>Hello, One!</div>
)

当访问localhost:3000/one时，我注意到背景是蓝色的，尽管background-color从未在1.scss中设置样式！

我相信这与css模块有关，所以我尝试用:local包装2.scss。此外，我尝试将2.scss重命名为2.module.scss，但没有成功。

我该如何解决这个问题？谢谢你的帮助！

编辑：请参阅codesandbox上的此问题：https://codesandbox.io/s/priceless-flower-oswh1

如果背景不是橙色，请单击"转到两个"，然后返回到一个，橙色主体将持续存在。

Answer 1

您需要一些全局样式来设置body元素的样式或提供css重置。

选项1:

// one.js
import Link from "next/link";
export default () => (
<div>
<style jsx global>{`
body {
background-color: red;
}
`}</style>
Hello, One!
<Link href="/two">
<a>Go to two</a>
</Link>
</div>
);

和

// two.js
import Link from "next/link";
export default () => (
<div>
<style jsx global>{`
body {
background-color: orange;
}
`}</style>
Hello, Two!
<Link href="/one">
<a>Go to one</a>
</Link>
</div>
);

您也可以将样式保存在一个单独的文件中，然后将其导入到需要的位置。

选项2:

// styles/one_style.js
import css from "styled-jsx/css";
export default css.global`
body {
background-color: red;
}
`;

和

// one.js
import globalStyles from "../styles/one_style";
import Link from "next/link";
export default () => (
<div>
<style jsx global>
{globalStyles}
</style>
Hello, One!
<Link href="/two">
<a>Go to two</a>
</Link>
</div>
);

代码沙盒

我希望这能有所帮助。