Next.js+TypeScript+SCSS项目全局设置元素内外边距为0不生效如何解决？

问题原因 #

你遇到的是样式导入顺序导致的覆盖问题：
CSS中优先级相同的规则，后加载的样式会覆盖先加载的样式。你在_app.tsx中先引入了自定义的globals.scss，之后才引入Ant Design的全局样式文件，Ant Design的内置样式里包含了对元素默认margin、padding的设置，优先级和你写的通配符*选择器规则一致，直接覆盖了你前面写的全局重置样式。

你可以通过浏览器开发者工具的元素样式面板验证：你写的*选择器对应的margin、padding规则会被划掉，表示被后加载的规则覆盖了。

解决方案 #

• 优先推荐调整样式导入顺序，把Ant Design的样式导入放在自定义全局样式前面，确保你的全局重置规则可以覆盖Ant Design的默认基础样式：

import type { AppProps } from "next/app";
import "antd/dist/antd.css";
// 自定义全局样式放在所有第三方全局样式之后引入
import "../styles/globals.scss";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

• 如果调整导入顺序后仍有特殊场景的样式被覆盖，可以临时给需要最高优先级的规则加!important修饰，不过非必要不建议滥用：

* {
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
}

内容的提问来源于stack exchange，提问作者Shyn