vue组件中修改组件外元素样式

在实际开发中，由于项目一开始设计的一些不合理性，会在组件中通过

 html[media=pad]{
     .xxx{
     /* 组件样式 */
     }
}

以上方式修改某些组件的样式，这样会涉及到从 html 层级选择，由于我 style 标签是这样写的

<style lang="less" scoped></style>

所以导致组件内部无法修改或选中组件外部元素，则无法修改外部元素的样式。

解决方案：

两种：

第一种：

直接新开一个全局的 style 标签

<style lang="less"></style>

在这里写全局的样式

第二种

使用 :global

<style scoped>
:global(.red) {
  color: red;
}
</style>

 

参考官方文档：https://cn.vuejs.org/api/sfc-css-features.html#scoped-css