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页面：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

但是在页脚中，我想为时事通讯设置背景颜色（红色）并居中对齐

   <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 attribute to the style tag。

以下是文档的摘录，仅供参考：

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

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

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

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

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

在一个组件中，例如订阅：

<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

Vue样式化本地组件

2 个答案: