:first-child 样式未在 Vue 组件中应用

Question

问题：

通常第一个<User> 应该有margin-left: 0px 并且应该与其他元素左对齐，但这不起作用，如下面的屏幕截图所示。有人知道如何正确解决此问题吗？

sidebar.scss代码：

.user {
  margin-left: -8px;

  &:first-child {
    margin-left: 0;
  }
}

Sidebar.vue代码

<template>
  <section class="sidebar">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: "Sidebar"
  }
</script>

<style scoped lang="scss">
  @import 'sidebar';
</style>

Profile.vue代码

<template>
  <main>
    <Sidebar>
      <Header text="Members" :button="{text: 'Edit'}" hasBorder="true"></Header>
      <User img="..."></User>
      <User img="..."></User>
      <User img="..."></User>
      <User img="..."></User>
      <Button color="grey" isRounded="true" isIconOnly="true"></Button>
    </Sidebar>
  </main>
</template>

User.vue代码：

<template>
  <div class="user">
    <img v-if="this.img" :src="this.img" :alt="this.name">
    <div v-if="!this.img"></div>
    <h6 v-if="this.name">{{this.name}}</h6>
    <slot></slot>
  </div>
</template>

Answer 1

使用::v-deep 更改scoped css。

我已经回答了这个问题，但我有一个旧的和更具描述性的答案，这可能有助于您了解https://stackoverflow.com/a/56698470/7358308的用法

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

注意：不要使用/deep/，因为它已被弃用，而且>>> 组合器也无法正常工作，因为您正在使用sass 预处理器

::v-deep {
  .user {
    margin-left: -8px;

    &:first-child {
     margin-left: 0;
   }
  }

}

Answer 2

不太确定这是否是这里的问题，但请注意:first-child 不会仅通过类名来选择第一次出现，而是通过父元素中的标记。换句话说：您不能使用类名将:first-child 应用于。相反，使用更语义化的东西，例如

<ul class="users">
  <li class="user"></li> <!-- there is your component -->
  <li class="user"></li>
  <li class="user"></li>
</ul>

Answer 3

范围样式在父组件和子组件之间不共享。您有多种选择：

1. 通过从父样式部分中删除作用域属性来使样式全局化。

2. 将样式导入目标组件（用户）。

3. 在作用域样式中使用深度组合器。

   >>>.user { ... }

或

/deep/ .user {
  ...
}

或

::v-deep .user {
  ...
}