问题
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)
I've tried those:
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);
}
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);
}
Also tried !important, but it doesn't work..
Do you got any suggestion beside making a new layout with header transparent?
回答1:
There are various solutions I can think of, with varying degrees of hackiness.
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
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.
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.
回答2:
In the body of this special page include a class name:
<body class="special">
Then in your CSS include rules for nav that are only for this page:
body.special nav {
background-color: rgba(0, 0, 0, 0);
}
来源：https://stackoverflow.com/questions/52536891/scoped-css-for-nuxt-js-layout