Наследовать CSS в компонентах Vue
У меня есть два компонента, у которых есть дочерние элементы в маршрутизаторе, например:
{
path: '/admin',
component: AdminMain,
children:[
{
path: '/admin',
component: AdminHome,
name: 'AdminHome'
}
]
},
{
path: '/',
component: Home,
children:[
{
path: '/',
component: Index,
name: 'Index'
}
]
}
Я хочу сделать два отдельных макета для этих компонентов, чтобы их потомки наследовали родительский CSS. Это возможно ? На данный момент я загружаю файл css в каждый компонент с заданной областью действия, потому что мой файл css конфликтует с vuetify css.
@JacobGoh К сожалению, в моем случае это не работает. Импортированный код в SCSS находится вне тела селектора как новый тег <style>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете глубокие селекторы, чтобы повлиять на css дочернего компонента
AdminMain.vue (родительский компонент)
<style scoped>
.a >>> .b { /* ... */ }
</style>
буду переводить на .a[data-v-f3f3eg9] .b { /* ... */ }
тогда .b будет влиять на дочерний компонент (AdminHome.vue)
Хорошо, но я использую бутстрап. В этом случае я должен добавить оператор ">>>" во весь файл?
С помощью стороннего CSS вы можете импортировать его в компонент main.js или root.
DOM content created with v-html are not affected by scoped styles, but you can still style them using deep selectors.
Эта формулировка на странице Глубокие селекторы документации Vue звучит так, как будто она противоречит сама себе. Но он говорит, например, что если вы хотите применить стиль к элементу 'p' и эти изменения отобразятся в v-html, ваш css должен выглядеть так.
>>> p {
/* some css */
}
У меня был ответ на аналогичный вопрос в stackoverflow.com/a/49654061/5599288. Может быть вам это будет полезно.