我正在使用 nuxt，并且我的导航有一个标题布局。 此导航的背景颜色为白色。
在一个特殊的页面上，我想让导航背景颜色透明。 （仅限本页）
这些我都试过了：
这将使背景对所有页面都是透明的。（我不希望这样）
<style lang="css">
nav {
background-color: rgba(0, 0, 0, 0);
}
这不起作用，因为我的导航不在此页面中，它包含在 nuxt 布局中。
<style lang="css" scoped>
nav {
background-color: rgba(0, 0, 0, 0);
}
也试过了！important，但它不起作用..
除了使标题透明的新布局之外，您有什么建议吗？
【问题讨论】：
我能想到各种解决方案，但有不同程度的hackiness。
简单 - 最可靠 - 直接 DOM 操作 这是不太具体的 Vue/Nuxt。您可以只向元素添加一个类，然后在期望的组件正确的生命周期方法中附加另一个具有所需样式的类
更多工作 - 仍然可靠 - Vuex 商店 使用 Vuex 存储来存储您想要从组件传递到布局的任何道具。感觉只是简单地设置背景颜色有点过头了。但是谁知道你将来还想设置什么，并且设置一个 Vuex 商店并不难。
更多工作 - 最不现实 - 路由器卫士 您可以添加特定的路线检查，以在到达特定路线或路线包含特定字符串等时设置背景颜色。这不是一个好的解决方案，因为如果路线发生变化，它在未来被破坏的可能性最高.
【讨论】：
在这个特殊页面的正文中包含一个类名：
<body class="special">
然后在您的 CSS 中包含仅适用于该页面的导航规则：
body.special nav {
background-color: rgba(0, 0, 0, 0);
}
【讨论】：