vue CSS样式穿透

在开发vue项目的时候，经常会引入组件。无论是第三方组件库还是自定义组件，难免会遇到防止影响其他页面上的样式，又需要在父组件修改子组件的样式。我用vue+ant专门为本文做了一个demo，给大家演示效果
demo.vue组件代码如下

<template>
  <a-card title="面板">
    <a-select label-in-value :default-value="{ key: 'lucy' }" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">
        Jack (100)
      </a-select-option>
      <a-select-option value="lucy">
        Lucy (101)
      </a-select-option>
    </a-select>
  </a-card>
</template>
<script>
export default {
  methods: {
    handleChange(value) {
      console.log(value) 
    }
  }
}
</script>
<style lang="less" scoped></style>

编译运行，我们会在浏览器上看到一个select的选择器。这个选择器的宽度是默认的， 通过Chrome的开发者工具我们发现，这个组件的div上有个类名.ant-select-selection

image.png

于是我们在style标签中定义class选择器，并设置它的宽度

<style lang="less" scoped>
.ant-select {
  .ant-select-selection {
    min-width: 300px;
  }
}
</style>

修改完之后，回到浏览器，发现宽度依旧没有变化，此时通过Chrome的开发者工具查找元素，我写的样式多了一个[data-v-329d3c09]属性

<style type="text/css">
.ant-select .ant-select-selection[data-v-329d3c09] {
  min-width: 300px;
}
</style>

在网上查了一下，原来是scoped的问题，把scoped去掉之后，样式就编译成功啦

image.png
去掉scoped我们是解决了样式不编译的问题，但从官网上了解到：当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属性，使得组件之间的样式不互相感染，相当于实现了样式模块化。既然scoped有这么大的作用，那我们就不能去掉scoped，于是我们引入一个新的概念深度选择器，也就是穿透。使用方法：就是在我们想穿透的选择器前面添加：>>> 或者/deep/ 或者::v-deep。官方还说>>>可能存在问题，建议使用后两者，我用的是less，所以用/deep/，修改后的代码：

<style lang="less" scoped>
.ant-select {
  /deep/ .ant-select-selection {
    min-width: 300px;
  }
}
</style>

回到浏览器看效果，大功告成O(∩_∩)O哈哈~

image.png