Стили с заданной областью всегда перезаписываются - PullRequest
Новая
       25

Стили с заданной областью всегда перезаписываются

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

Я сейчас изучаю Vue и не могу избавиться от проблемы с областью действия.

Вопрос : стили profile.vue продолжают заменять стили из sidebar.vue. Боковая панель должна иметь красный фон с этой настройкой, а раздел на странице профиля должен быть синим. Не следует делать scoped в теге style этого задания?

Вывод : enter image description here

Profile.vue ниже: 

<template>
  <main>
    <section>
      Test
    </section>
    <Sidebar></Sidebar>
  </main>
</template>

<script>
  import Sidebar from "../../components/sidebar/Sidebar";
  export default {
    name: "Profile",
    components: {Sidebar}
  }
</script>

<style scoped lang="scss">
  main {
    width: 100%;
    @include flex();

    section {
      width: 100%;
      background: blue;
      margin-left: $size*5;
    }
  }
</style>

Sidebar.vue ниже: 

<template>
  <section>
    Test
  </section>
</template>

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

<style scoped lang="scss">
  section {
    max-width: ($size*45);
    width: 100%;
    background: red;
  }
</style>

Ответы [ 2 ]

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

Проблема здесь в том, что элемент root вашего дочернего компонента является разделом

По дизайну родительский компонент может стилизовать дочерние компоненты root. Обычно это используется, чтобы вы могли легко стилизовать дочерний компонент, добавить поля, отступы и т. Д. c. Но в вашем случае это противоречит.

Что вы видите: 

<template>
  <div>
    <section>...</section>
    <your-component></your-component>
  </div>
</template>

Что видит ваш scoped css: 

<template>
  <div>
    <!-- I can style out here -->
    <section>...</section>
    <section>
    <!-- But I can't style in here -->
    </section>
  </div>
</template>

scoped css знает не в go В компонент, а в компоненты root как в основном на уровне, который разрешено стилизовать, и, поскольку это раздел, селектор css действителен.

Если вы просто оберните дочерний компонент следующим образом, конфликта не будет: 

<template>
  <div>
    <section>...</section>
  </div>
</template>

Вы также можете стилизовать их с помощью разных классов и т. д. c.

Вот официальная документация на нем.

...