CODEWITHSUNDEEP
javascriptcssvue-componentvue.js
NikxDa
NikxDa

Reputation: 4187

Vue.js modify other component's style

I am using Webpack with Vue.js to create a large-scale web app. The problem I encounter is the following:

I've am using vue-router and the following structure for the main app template:

<customNav></customNav>
<router-view></router-view>

The navigation is a single file component that has its own styles defined inside the component file. Let's say it has a black background by default. Now, on single occasions (when showing different views through the router), I want it to be transparent.

I thought I might just overwrite the CSS in the router view component, but this doesn't work because Webpack is bundling all the CSS of components I import, and I have to import all the components in the main.js to define them in the router. Therefore, overwriting the style in a component leads to it being the global default, even if the component is not even used.

How would I solve this problem?

Upvotes: 2

Views: 4749

Answers (1)

Saurabh
Saurabh

Reputation: 73589

You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground

<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>

I think you can change this variable in two ways:

  • Have this as an instance data and change it based on current route.
  • Have this in vuex state and change in different components based on your requirement.

Upvotes: 1

Related Questions