在使用Vue开发时,为了让组件内部的样式不污染外部的元素,我们通常会使用 scoped 即:
<style lang='scss' scoped> </style>
但是这也会导致我们失去对外部元素样式的控制能力,以下是两种解决方案:
1.新增一个 style 标签:
<style lang='scss' scoped> </style>
//控制外部样式
<style lang='scss'>
* {
color: red
}
</style>
2.使用 :global()
<style lang='scss' scoped
:global(*) {
color: blue
}
</style>