Vue.js如何在Component中定义(覆盖)CSS样式? [英] Vue.js How to define (override) css style in a Component?

问题描述

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

The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:

 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>
  });

推荐答案

您有几种选择-选择自己的冒险方式:

You have several options - choose your own adventure:

使用全局实用程序样式

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

Somewhere globally, define a utility class like:

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

然后在您的模板中:

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

---

使用范围内的CSS

如果您使用的是单个文件组件，则可以使用作用域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>

---

使用内联样式

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.然后，每个组件都应根据需要为其子元素/组件设置边距.但是，如果您已经拥有大型代码库，这可能不合理.

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.

这篇关于Vue.js如何在Component中定义(覆盖)CSS样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！