vue - 样式不适用于同一文件中的额外组件答案

【问题标题】：vue - style not applied for extra component in same filevue - 样式不适用于同一文件中的额外组件
【发布时间】：2021-12-21 00:01:25
【问题描述】：

我在我的test 组件的样式表中为.title 和.description 添加了一些样式，但不确定为什么没有应用该样式。

const test = Vue.component("test", {
  template: `<div class="test">
    <span class="title">{{title}}</span>
    <div class="description">{{description}}</div>
  </div>`,
  props: {
    id: Number,
    title: String,
    description: String,
  },
});

HelloWorld.vue

<template>
  <div id="hello">
    <test
      v-for="item in steps"
      :key="item.id"
      :id="item.id"
      :title="item.title"
      :description="item.description"
    />
  </div>
</template>

<script>
import Vue from "vue";

const test = Vue.component("test", {
  template: `<div class="test">
    <span class="title">{{title}}</span>
    <div class="description">{{description}}</div>
  </div>`,
  props: {
    id: Number,
    title: String,
    description: String,
  },
});

export default {
  components: {
    test,
  },
  data() {
    return {
      steps: [
        {
          id: 1,
          title: "What is Lorem Ipsum?",
          description:
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
#hello {
  display: flex;
  flex-direction: column;
  .test {
    /* style applied */
    text-align: left;
    margin-top: 10px;
    .title {
      /* style not applied */
      font-size: 50px;
      color: orange;
    }
    .description {
      /* style not applied */
      font-size: 10px;
      line-height: 12px;
      color: red;
    }
  }
}
</style>

代码沙盒：
https://codesandbox.io/s/amazing-flower-rcvob?file=/src/components/HelloWorld.vue

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

当使用范围样式时，样式将仅适用于相应模板中的直接元素。 title 和 description 元素是 <test> 组件的子元素，不受其他组件的作用域样式影响。

如果您希望样式应用于另一个组件的子元素，则需要使用::v-deep：

#hello {
  .test {
    &::v-deep .title {
      color: red;
    }
  }
}

我无法让它在代码沙盒中工作。可能是配置问题。另见Deep Selectors。

【讨论】：