Vue 样式化本地组件

Question

我有单文件组件，我想在订阅页面和页脚等不同的地方使用它。 但我想风格不同。 是否可以设置本地组件的样式？

组件文件：Newsletter.vue

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

订阅页面：Subscribe.vue

让我们说风格时事通讯背景色绿色并左对齐

<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>

订阅页面：Footer.vue

但是在页脚中，我想将 Newsletter 背景色设置为红色并居中对齐

   <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 属性添加到 style 标签。

这是文档中的片段，仅供参考：

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

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

这只会在本地将 styles 应用于包含样式标签的组件。 但请记住，您确实应该避免使用标签选择器，因为它们是最通用的。 最好使用 class 选择器，因为它具有更高的特异性，这意味着它不太可能被覆盖（id 选择器或内联 styles 优先）。 我建议做这样的事情：

<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 class 将仅在此单文件组件中将背景颜色设为绿色。

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-selectors

要考虑的另一个选项是使用全局样式代替本地样式，并确保每个共享的 class 元素都有一个唯一的父元素。

在订阅等一个组件中：

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

在另一个组件中，“.somethingelse”应该是组件的特定类型：

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

有关全局特异性的更多信息：

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