[Vuejs]-Vue.js How to define (override) css style in a Component?

by

0👍

Maybe u can try this approach,
Pass a variable with the class name to the component

<my-component v-bind:class="variable with class name"></my-component>

Then apply a rule to all p elements inside it, something like this i guess:

    .test p{
      your styles
    }

U can see more here: vue api class and style bindings

I dont know for sure if this was what you wanted, but i gave it a shot 🙂

0👍

You have several options – choose your own adventure:

Use a global utility style

Somewhere globally, define a utility class like:

.u-margin-reset {
  margin: 0;
}

Then in your template:

<p class="u-margin-reset">hello</p>

Use scoped CSS

If you are using single file components, you can use scoped css:

<template>
  <p class="special-p">hello</p>
</template>

<style scoped>
.special-p {
  margin: 0;
}
</style>

Use inline styles

Vue.component('activity-component', {
  template: `<p style="margin:0;"></p>`,
});

or

Vue.component('activity-component', {
  computed: {
    myStyle() {
      return {
        margin: 0,
      };
    },
  },
  template: `<p :style="myStyle"></p>`,
});

As an aside, I’d recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.

Leave a comment