Vue.js Как определить (переопределить) стиль CSS в компоненте?

Question

Стиль по умолчанию для тега p на моей странице имеет некоторое нижнее поле. Мой компонент использует теги p , и, соответственно, теги p в тексте моего компонента показывают соответствующее нижнее поле. Как я могу переопределить / определить новый стиль CSS для тегов p в моем компоненте. Я определяю свой компонент следующим образом:

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

Answer 1

У вас есть несколько вариантов - выберите свое собственное приключение:

Использовать глобальный стиль утилит

Где-нибудь на глобальном уровне определите служебный класс, например:

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

Тогда в вашем шаблоне:

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

---

Использовать ограниченный CSS

Если вы используете отдельные файловые компоненты , вы можете использовать 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. Затем каждый компонент должен устанавливать поля по мере необходимости для своих дочерних элементов / компонентов. Однако это может быть нецелесообразно, если у вас уже есть большая кодовая база.

Answer 2

Может быть, вы можете попробовать этот подход, передать переменную с именем класса компоненту

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

Затем применить правило ко всем p элементам внутри него, что-то вроде этого, я думаю:

    .test p{
      your styles
    }

U вы можете увидеть больше здесь: vue api class и style bindings

Я не знаю точно, было ли это то, что вы хотели, но я дал ему шанс:)