Vue：向应用程序添加样式会覆盖子组件的样式答案

【问题标题】：Vue: adding style to app overrides styles of child componentsVue：向应用程序添加样式会覆盖子组件的样式
【发布时间】：2022-02-11 02:49:09
【问题描述】：

我有一个使用 Vue 和 Tailwind 设计的简单页面：

App.vue：

<template>
<!--  <div class="bg-blue-500 flex flex-col h-screen min-h-screen " id="app">-->
    <div id = "app" class = "bg-blue-500 flex flex-col h-screen min-h-screen   app">
        <Header/>

      <main id ="app-main">
        <p>app</p>
        <router-link to="/home">Home</router-link>
        <router-link to="/about">About</router-link>

      </main>

      <Footer/>
  </div>
</template>

<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Header, Footer
  }
}
</script>

<style>
#app {
 
}

#app-main  {
  display: flex;
  flex: 1 1 0%;

}
</style>

但是，如果我编辑 #app 样式：

#app {
 background-color: purple;
}

因此可以看出，当使用 Tailwind 时，样式的行为符合预期：页眉和页脚之外的所有内容都是蓝色的，页眉和页脚 - 它们各自的颜色。但是，尝试在 <style> 标记中设置颜色会导致 #app 的背景颜色覆盖页眉和页脚的背景颜色。

我该如何解决？当人们不使用 Tailwind 时，他们如何处理它？

【问题讨论】：

将 #app 放在 dom 的更上方，您有 id="app" class="bg-blue-500，其中 #app 的 css 将覆盖 bg-blue-500，因为供应商/顺风在应用 css 之前被捆绑
@LawrenceCherone 我不明白。 id = "app" 已经是最上面的 div
包装在一个额外的 div 中

标签： vue.js vuejs2 tailwind-css

【解决方案1】：

如果我理解正确，您正在尝试更改蓝色 app 区域的颜色。

注意到#app 元素上的bg-blue-500 类了吗？那就是控制元素background color的类。

我无法检查它，但我敢打赌将其重命名为 bh-purple-500 会使背景变成紫色。您可以在文档中find more 默认颜色。

他们这样做的方式会覆盖子元素的样式。

【讨论】：