vue 之 CSS进行样式穿透的方法（/deep/、::v-deep、＞＞＞ 、:deep、额外的全局＜style＞）

一、简介

在很多vue的组件库 , 如vant，elementUI， iview等都可能自定义一些样式文件，如果我们在项目中引入了样式组件或者通过v-html渲染了数据，然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用，修改无效, 但如果直接去掉scoped话又会影响全局样式，令人头疼。
本文是介绍：样式穿透和额外的全局

<style>

的方式来解决该问题。

二、具体实例

以v-html渲染的数据为例：

页面初始样式：

<div>
    父组件
    <divclass='parent'id='parent'v-html="html"></div></div>

data() {
  return {
    html: '<div>这是通过v-html渲染的元素 <buttonid="btn">点击按钮</button></div>'
  }
},

页面初始效果：

① >>>

进行样式穿透，但是只适用于原始CSS，不适用于 Sass、Less等预处理器。

<stylescoped>>>> #btn{width: 150px;height: 30px;}</style>

页面效果：

② /deep/

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，但问题是在vue-cli3以上版本创建的vue项目不再被支持。

<stylescoped>/deep/ #btn{width: 150px;height: 30px;background-color: green;}</style>

页面效果：

③ ::v-deep

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，在vue-cli3以上版本创建的vue项目才也会被支持。

<stylescoped>::v-deep #btn{width: 150px;height: 30px;background-color: yellow;}</style>

页面效果：

④ :deep

进行样式穿透，既适用于CSS，适用于Sass、Less等预处理器，在某些版本的vue中不支持

::v-deep

，就可使用它进行替代：

<stylescoped>:deep #btn{width: 150px;height: 30px;background-color: red;}</style>

页面效果：

⑤ 独立的

<style>

使用一个额外的不加

scoped

属性的

<style>

标签专门书写目标元素的样式，但这种方法相当于把这里面的样式放到了全局作用域，可能会影响其他页面的样式，轻易不要使用。

<style>#btn{width: 150px;height: 30px;background-color: blue
}</style>

页面效果：