: стили первого ребенка не применяются в Vue компоненте - PullRequest
Новая
       17

: стили первого ребенка не применяются в Vue компоненте

0 голосов
/ 26 мая 2020

Проблема:

Обычно первый <User> должен иметь margin-left: 0px и выравниваться по левому краю с другими элементами, но это не работает, как вы можете видеть в скриншот ниже. Кто-нибудь знает, как это исправить?

enter image description here

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>

Ответы [ 3 ]

1 голос
/ 26 мая 2020

Не уверен, что это вообще проблема, но учтите, что :first-child выбирает первое вхождение не просто по имени класса, а по тегу в родительском элементе. Другими словами: вы не можете использовать имя класса для применения :first-child к. Вместо этого используйте что-то большее семанти c, например 

<ul class="users">
  <li class="user"></li> <!-- there is your component -->
  <li class="user"></li>
  <li class="user"></li>
</ul>
1 голос
/ 26 мая 2020

Используйте ::v-deep, чтобы изменить scoped css.

Я уже ответил на это, но у меня есть старый и более описательный ответ, который может помочь вам понять использование { ссылка }

https://vue-loader.vuejs.org/guide/scoped-css.html#deep -селекторы

Примечание: не используйте /deep/, потому что он устарел, а также >>> комбинатор будет тоже не работает, так как вы используете sass препроцессор 

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

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

}
0 голосов
/ 26 мая 2020

Стиль с заданной областью не используется совместно родительскими и дочерними компонентами. У вас есть несколько вариантов:

  1. Сделать стиль глобальным, удалив атрибут scoped из раздела стиля в родительском.

  2. Импортировать стиль в целевой компонент (Пользователь ).

  3. Используйте глубокий комбинатор в стиле с областью видимости.

    >>> .user {...}

или 

/deep/ .user {
  ...
}

или 

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