Nuxt.js 布局的作用域 css [英] Scoped css for Nuxt.js layout

问题描述

我正在使用 nuxt，并且我的导航有一个标题布局.此导航的背景颜色为白色.

I'm working with nuxt and i have a header layout for my nav. This nav has a background color of white.

在一个特殊的页面上，我想让导航背景颜色透明.(仅限本页)

On a special page, i want to make the nav background color transparent. (Only for this page)

我已经尝试过:

这将使背景对所有页面透明.(我不想要)

This will make the background transparent to all pages.(I don't want that)

<style lang="css">
nav {
background-color: rgba(0, 0, 0, 0);
}

这不起作用，因为我的导航不在此页面中，它包含在 nuxt 布局中.

This won't work cause my nav it's not in this page, it's included from nuxt layout.

<style lang="css" scoped>
nav {
background-color: rgba(0, 0, 0, 0);
}

也尝试过！important，但它不起作用..

Also tried !important, but it doesn't work..

除了制作标题透明的新布局之外，您还有什么建议吗?

Do you got any suggestion beside making a new layout with header transparent?

推荐答案

我能想到的解决方案有很多种，但都有不同程度的hackiness.

There are various solutions I can think of, with varying degrees of hackiness.

Easist - 最可靠 - 直接 DOM 操作这是 Vue/Nuxt 特定的较少.您可以向元素添加一个类，然后在所需的组件中正确的生命周期方法中附加另一个具有所需样式的类

Easist - most reliable - direct DOM manipulation This is the less Vue/Nuxt specific. You can just add a class to the element and then within the desire components correct lifecycle method you attach another class with the desired styles

更多工作 - 仍然可靠 - Vuex 商店使用 Vuex 存储来存储您想要从组件传递到布局的任何道具.感觉简单地设置背景颜色有点矫枉过正.但谁知道你将来还想设置什么，设置一个Vuex商店并不难.

more work - still reliable - Vuex store Use a Vuex store to store any props you want to be passed from components up to layouts. Feels like it is overkill for simply setting background colors. But who knows what you also will want to set in the future and its not difficult to set up a Vuex store.

更多工作 - 最不现实 - Router Guards您可以添加特定的路线检查，在到达特定路线或路线包含特定字符串等时设置背景颜色.这不是一个好的解决方案，因为如果路线改变，它在未来被破坏的可能性最高.

more work - least realiable - Router Guards You can add specific route checks that set the color of the background when a specific route is reached or a route contains a certain string, etc. This is not a good solution because it has the highest chance of getting broken in the future if routes change.

这篇关于Nuxt.js 布局的作用域 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！