在开发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
