如何为Vue.js的App组件本身添加CSS样式？

问题原因 #

你的App组件模板中没有根容器元素，Vue会直接将<MainHeader>、<ContentWrapper>、<MainFooter>这三个组件渲染到页面的挂载点（通常是index.html中的<div id="app"></div>），因此你尝试的App选择器（Vue组件并非真实DOM标签）和未绑定到任何元素的.page__app类都无法生效。

解决方案 #

最规范的做法是给App组件的模板添加一个根容器元素，然后为这个容器设置样式：

<template>
  <!-- 添加根容器并绑定类名 -->
  <div class="app-root">
    <MainHeader class="app__header" />
    <ContentWrapper class="app__content-wrapper" />
    <MainFooter class="app__footer" />
  </div>
</template>

<style lang="css" scoped>
/* 为根容器设置样式 */
.app-root {
  background-color: #ccc;
  /* 可添加其他样式，比如宽高、边距等 */
}

/* 保留你原有样式 */
.app__wrapper {
  width: 90vmin;
  height: 90vmin;
  border-radius: 20px;
  background-color: #eee;
}
</style>

为什么之前的尝试无效 #

• App选择器：Vue组件是抽象的逻辑单元，渲染后不会生成<App>标签，因此该选择器无法匹配任何真实DOM元素。
• .page__app类：你没有将这个类绑定到任何DOM元素上，自然无法应用样式。

内容的提问来源于stack exchange，提问作者Ed The ''Pro''