Vue стилизация местных компонентов

Question

У меня есть однофайловые компоненты, и я хочу использовать его в разных местах, таких как страница подписки и нижний колонтитул. Но я хочу, чтобы стиль был другим. Можно ли стилизовать локальные компоненты?

Файл компонента: информационный бюллетень. vue

<template>
<form>
    <label>Enter your email address here</label>
      <input type="text" name="email" required/>
</form>
  <button @click="subscribe" >
    SUBSCRIBE
  </button>
</template>

Страница подписки: Подписаться. vue

let say style Фон информационного бюллетеня цвет зеленый и выравнивание по левому краю

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default {
 components: {
  Newsletter
 }
}
</script>

<style scoped>
 Newsletter{
  background-color: green;
  text-align:left;
 }
</style>

Страница подписки: нижний колонтитул. vue

но в нижнем колонтитуле я хочу оформить информационный бюллетень красным цветом фона и выровнять по центру

   <template>
      <h2>
        JOIN OUR NEWSLETTER
      </h2>
      <Newsletter></Newsletter>
   </template>

<script scoped>
import Newsletter from "@/components/Newsletter.vue";

export default {
 components: {
  Newsletter
 }
}
</script>

<style>
 Newsletter{
  background-color: red;
  text-align:center;
 }
</style>

Answer 1

Это возможно! Все, что вам нужно сделать, это добавить атрибут scoped к тегу стиля .

Вот фрагмент кода из документации только для справки:

<template>
  <button class="btn btn-close">X</button>
</template>

<style scoped>
.btn-close {
  background-color: red;
}
</style>

Это будет применять стили только локально, к компоненту, который содержит тег стиля. Имейте в виду, однако, вы действительно должны избегать использования селекторов тегов, потому что они являются наиболее общими c. Лучше использовать селектор класса, потому что он обладает более высокой специфичностью, что означает, что он реже будет перезаписан (селекторы идентификаторов или встроенные стили имеют преимущество). Я бы предложил сделать что-то вроде этого:

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter class="newsletter"></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default {
 components: {
  Newsletter
 }
}
</script>

<style scoped>
 .newsletter {
  background-color: green;
  text-align:left;
 }
</style>

В приведенном выше примере класс newsletter сделает фоновый цвет зеленым только в этом однофайловом компоненте.

Answer 2

Есть много вариантов. Вы можете воспользоваться комбинатором ::v-deep, который позволяет передавать стиль дочерним компонентам.

Используя ваш пример с небольшим изменением:

<template>
 <h2>
  Subscribe to receive Newsletter
  </h2>
  <Newsletter class="newsletter"></Newsletter>
</template>

<script>
import Newsletter from "@/components/Newsletter.vue";

export default {
 components: {
  Newsletter
 }
}
</script>

<!-- this is the change. Updated to have `::v-deep` to allow style to "leak" to the child component -->
<style scoped>
 ::v-deep .newsletter {
  background-color: green;
  text-align:left;
 }
</style>

Подробнее на:

https://vue-loader.vuejs.org/guide/scoped-css.html#deep -выборчики

Другой вариант, который следует рассмотреть, - это использовать глобальный стиль вместо локального стиля и убедиться, что у каждого элемента общего класса есть уникальный родительский элемент.

В одном компоненте, таком как Subscribe:

<style lang="scss">
 .subscribe { 
  .newsletter {
   // style for this specific version of newsletter
  }
}
</style>

В другом компоненте, где ".somethingelse" должен быть указан c тип компонента:

<style lang="scss">
 .somethingelse {
   .newsletter {
     // style for this other specific version of newsletter
   }
 }
</style>

Дополнительная информация о глобальной специфике:

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity