nuxt js样式作用域我不知道如何更改另一个组件的样式答案

【问题标题】：nuxt js style scoped i can't figure out how to change the style of another componentnuxt js样式作用域我不知道如何更改另一个组件的样式
【发布时间】：2021-02-27 18:32:14
【问题描述】：

请帮我弄清楚是如何工作的。文档说明它仅在一个组件的区域中更改样式，但是如果我需要根据页面上的组件更改另一个组件的样式怎么办。比如我有一个组件（Footer.vue），它连接在默认组件（layouts/default.vue）Nuxt中。并且有许多页面（pages / ...）将使用该标签包含在（layouts / default.vue）中。我用

<style scoped>

#content-wrapper[data-v-314f53c6] >>> footer[data-v-0d2d6594] {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>

和

<style scoped>
    
    footer[data-v-0d2d6594] {
      position: fixed;
      width: 100%;
      bottom: 0;
    }
    </style>

这样不行。

我的项目截图

请告诉我它是如何工作的，以及如何做到最好。

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

你试过没有scoped吗？

<style>

#content-wrapper footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}
</style>

【讨论】：

是的，我试过了，但是在这种情况下，样式会被全局声明，并且会作用于所有页面，我只需要作用于某些页面