Vue.js如何在组件中定义(覆盖)CSS样式?

时间:2019-06-07 16:17:09

标签: vue.js components

页面上 p 标签的默认样式具有一定的底边距。我的组件使用 p 标签,因此,组件文本中的 p 标签显示了相应的下边距。如何在组件中为 p 标签覆盖/定义新的CSS样式。我这样定义我的组件:

 Vue.component ('activity-component', {

  props: {

            customer_id:{},
            is_admin:{},         
            isAdmin:{},      
            isKitsActionplan:{},
            ....

    template:
      `<div 
            class="row msDashboard-box"
            style="cursor:default;padding-top:12px; 
                    padding-bottom:12px;"
            >
        ... 
        <p> ... </p>
  });

2 个答案:

答案 0 :(得分:0)

也许您可以尝试这种方法, 将具有类名称的变量传递给组件

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

然后将规则应用于其中的所有p元素,我猜是这样的:

    .test p{
      your styles
    }

您可以在这里看到更多信息:vue api class and style bindings

我不确定这是否是您想要的,但是我给了它一个机会:)

答案 1 :(得分:0)

您有多种选择-选择自己的冒险经历:

使用全局实用程序样式

在全局某处定义一个实用程序类,例如:

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

然后在您的模板中:

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

使用范围内的CSS

如果您使用的是single file components,则可以使用scoped css

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

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

使用内联样式

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

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

  

顺便说一句,我建议使用CSS重置,该重置将所有元素的边距全局重置为0。然后,每个组件应根据需要为其子元素/组件设置边距。但是,如果您已经拥有大型代码库,这可能不合理。