Как применить CSS к root компонента Vue 3? - PullRequest
Новая
       8

Как применить CSS к root компонента Vue 3?

0 голосов
/ 29 апреля 2020

Я перемещаю Vue 2 источника на Vue 3 (бета), и наткнулся на это: 

<template>
  <section id="this">   <!-- how to eliminate this? -->
    <div>
      YOU ARE AT HOME ?
    </div>

    <h2>Hi <span>{{ uid }}</span></h2>

    <!-- List the projects we have access to -->
    <div id="grid-container-projects">
      <ProjectTile :project="null" />
      <ProjectTile v-for="p in projectsSorted" :key="p.key" :project="p" />
    </div>
  </section>
</template>

<style scoped>
  #this {
    text-align: center;
  }
  ...

Детали не имеют значения. Я бы хотел добиться применения text-align: center к узлу #this, но без узла #this.

Возможно ли это или целесообразно? :)

Я попробовал следующее: 

<template>   <-- Vue 3 (beta) -->
  <div>
    YOU ARE AT HOME ?
  </div>
 ...
</template>

<style scoped>
  * { 
    text-align: center
  }
  ...

Это делает желаемый макет, но вызывает переполнение стека в браузере. Конечно, это может быть просто бетаизм Vue 3. (3.0.0-beta.4)

Как бы вы поступили? Оставить section как есть или как-то от него избавиться?

...