область действия стиля nuxt js я не могу понять, как изменить стиль другого компонента

#javascript #vue.js #nuxt.js

#javascript #vue.js #nuxt.js

Вопрос:

Пожалуйста, помогите мне разобраться, как это работает. В документации указано, что он изменяет стиль только в зоне одного компонента, но что, если мне нужно изменить стиль другого компонента в зависимости от компонента на странице. Например, у меня есть компонент (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>
  

Это так не работает.

Скриншоты моего проекта

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Пожалуйста, скажите мне, как это работает, и как лучше это сделать.

Ответ №1:

Вы пробовали это без scoped ?

 <style>

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

Комментарии:

1. Да, я пытался, но в этом случае стиль будет объявлен глобально и будет действовать на всех страницах, а мне нужно действовать только на определенных