如何将 CSS 应用到 Vue 3 组件的根目录？答案

【问题标题】：How to apply CSS to the root of a Vue 3 component?如何将 CSS 应用到 Vue 3 组件的根目录？
【发布时间】：2020-08-13 23:05:15
【问题描述】：

我正在将 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 beta 主义。 (3.0.0-beta.4)

您将如何进行？让section 保持原样，或者以某种方式摆脱它？

【问题讨论】：

标签： css vuejs3

【解决方案1】：

就我个人而言，我会选择section，因为您在 div 标签中添加了一个 id 以唯一地集中该元素。

而在第二个选项中，您通常会集中所有组件元素

【讨论】：