:first-child styles not beeing applied in Vue Component - css

Question

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

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

Answer 2

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;
}
}
}

Answer 3

Scoped style is not shared between parent and child components. You have several options:
Make style global by removing scoped attribute from style section in parent.
Import style into the target component (User).
Use the deep combinator in scoped style.
>>>.user {
...
}
or
/deep/ .user {
...
}
or
::v-deep .user {
...
}