随着现代 Web 应用程序的开发流程变得越来越复杂，Next.js 成为了一个备受推崇的 React 框架，它可以大大简化前端开发。尽管如此，样式总是一个令人敬畏且棘手的主题，特别是在 Next.js 中，并且 Next.js 的 CSS 模块系统并不总是与复杂的样式成对应。因此，当我们需要对母板中的样式进行更改时，我们需要一些技巧。
CSS 模块系统
在 Next.js 中，我们可以使用 CSS 模块系统来优化样式。这是一个从设计上创建了用于具有作用域和重用的 CSS 类的机制。CSS 模块系统提供了最佳实践以确保您的样式适用于特定模块或组件。这意味着，如果您有一个大型应用程序，您可以避免样式冲突和污染。
CSS 模块系统基于 webpack，并使用了它的模块系统。模块中的所有类名都会被自动重写，在它们的类名前加上模块 ID。例如，如果我们有一个名为 styles.module.css 文件中的样式，如下所示：
.container {
width: 100%;
background-color: #F9FAFB;
border-radius: 5px;
}我们可以使用重写后的类名 styles.container 来应用这个样式：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- ---------- -
------ -
---- -----------------------------
-------- ----------
------
-
-这样，我们可以确保样式只适用于该组件或模块。
从母板中重写样式
有时候，在 Next.js 应用程序的根组件中，我们需要像 <head> 和 <body> 这样的标签之外的样式。例如，我们可能想为整个应用程序设置字体或背景颜色。在这种情况下，我们可以使用 pages/_app.js 文件来定义我们需要的样式。
import '../styles/global.css'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}但是，使用这种方法定义的样式，可能会与母板（例如 pages/_document.js 中定义的标签）中的样式冲突。要解决这个问题，我们需要使用以下技巧：
1. 使用较高的优先级（Specificity）覆盖样式
在 CSS 中，具有相同特定时间的样式规则将根据声明的先后顺序进行应用。例如，如果您使用了以下样式规则：
.container {
width: 400px;
}并将其后面的样式规则修改为：
.container {
width: 500px;
}那么最终应用的规则将是第二个，因为它比第一个规则更具体。因此，在 Next.js 应用程序中，您可以使用更具体的选择器来覆盖母板中的样式。
2. 使用 !important 关键字
!important 关键字是一个令人爱恨交加的事情。虽然它可以解决样式优先级的问题，但是它也可能导致样式的重复和难以维护的代码。但是，在某些情况下，如果您需要解决特定的样式问题，您可以在样式规则后添加 !important 关键字，从而确保它在应用程序中优先于母板中的样式。
.container {
width: 100% !important;
background-color: #FFFFFF;
border-radius: 5px;
}3. 修改 DOM 树
通常情况下，您应该避免修改 DOM 树，但是您可以使用 JavaScript 来动态更改页面上的样式。例如，您可以使用 document.body.style.backgroundColor 来更改应用程序的背景颜色。
-- -------------------- ---- -------
------ - --------- - ---- -------
------ ------- -------- ------- ---------- --------- -- -
------------ -- -
----------------------------------- - ---------
-- ---
------ ---------- -------------- --
-当您使用这种技术时，您需要确保在 Next.js 应用程序中没有其他样式会影响您的代码。
总结
在这篇文章中，我们学习了如何在 Next.js 应用程序中从母板中重写样式。我们了解到，我们可以使用 CSS 模块系统来定义模块和组件的样式，并使用更高优先级的选择器、!important 关键字、以及 JavaScript 动态更改样式等技巧来覆盖母板中的样式。当您面对更加复杂的情况时，这些技巧可以提供帮助，但是您需要记住在应用程序中保持清晰和一致的样式，以便管理和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f97377d4982a6eb88a50f