：Vue Component中未应用首字母样式

Question

问题：

通常第一个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> 代码：

admin.initializeApp(functions.config().firebase)

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

不太确定这是否是这里的全部问题，但是请注意，$ pytest -W ignore -s ================================================= test session starts ================================================== platform linux -- Python 3.8.2, pytest-5.4.1, py-1.8.1, pluggy-0.13.1 django: settings: project_sites.settings.tests (from ini) rootdir: /home/emes/devel/project/project, inifile: pytest.ini plugins: django-3.8.0, env-0.6.2, case-1.5.3, cov-2.8.1 collected 2 items [...] =============================================== short test summary info ================================================ FAILED deals/tests/test_wtf.py::TestWTF::test_failure - AssertionError: False is not true FAILED deals/tests/test_wtf.py::TestWTF::test_success - django.db.utils.IntegrityError: UNIQUE constraint failed: use... ================================================== 2 failed in 22.76s ================================================== 并不是仅通过类名而是通过父元素中的标记来选择第一次出现的情况。换句话说：您不能使用类名来应用:first-child。相反，请使用更多语义，例如

:first-child

Answer 3

父级和子级组件之间不共享作用域样式。您有几种选择：

1. 通过从父级的“样式”部分中删除范围属性来使样式具有全局性。

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

3. 在范围内使用深度组合器。

   .item p:nth-child(even) { ... }。用户{ ... }

或

>>>

或

/deep/ .user {
  ...
}