0

Problem:

Normally the first <User> should have margin-left: 0px and should align to the left with the other elements but this doesn't work as you can see in the screenshot below. Anyone got an idea how to fix this properly?

enter image description here

sidebar.scss Code:

.user {
  margin-left: -8px;

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

Sidebar.vue Code

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

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

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

Profile.vue Code

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

<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>
Dominik
  • 118
  • 2
  • 10

3 Answers3

1

Use ::v-deep to change scoped css.

I answered this already but I have an old and more descriptive answer available which might be a help to you to understand the usage https://stackoverflow.com/a/56698470/7358308

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

Note: Don not use /deep/ because it's deprecated and also >>> combinator will not work too as you are using sass preprocessor

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

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

}
Satyam Pathak
  • 6,612
  • 3
  • 25
  • 52
  • Doesn't work unfortunately. The `margin-left:-8px` are working tough, so the scope shouldn't be affected in my opinion. It's just weird that everything is working except the pseudo-element – Dominik May 26 '20 at 13:02
  • Have you tried applying any other style like `background` or any major differentiating `style`, it seems like there requires minimally reproducible example – Satyam Pathak May 26 '20 at 13:06
  • Yep same issue. `background: red` keeps compiling to all `.user` elements. If I try to add `background: blue` to `:first-child` it's not working again. – Dominik May 26 '20 at 13:10
1

Not too sure if this is at all the problem here, but note that :first-child does not pick the first occurrence by the mere class name, but by the tag within a parent element. In other words: you cannot use a class name to apply :first-child to. Instead, use something more semantic like

<ul class="users">
  <li class="user"></li> <!-- there is your component -->
  <li class="user"></li>
  <li class="user"></li>
</ul>
roye7777777
  • 394
  • 1
  • 2
  • 13
  • Yeah I think this was the problem. I thought too complicated haha. I changed `:first-child` to `:first-of-type` and it worked. Thank you :) – Dominik May 28 '20 at 09:18
0

Scoped style is not shared between parent and child components. You have several options:

  1. Make style global by removing scoped attribute from style section in parent.

  2. Import style into the target component (User).

  3. Use the deep combinator in scoped style.

    >>>.user { ... }

or 

/deep/ .user {
  ...
}

or 

::v-deep .user {
  ...
}
Igor Moraru
  • 7,089
  • 1
  • 12
  • 24
  • isn't working unfortunately. It's weird tough that the styles are applied to `.user`. Only the styles for the pseudo-element are ignored – Dominik May 26 '20 at 13:11