在開發(fā)vue項目的時候，經(jīng)常會引入組件。無論是第三方組件庫還是自定義組件，難免會遇到防止影響其他頁面上的樣式，又需要在父組件修改子組件的樣式。我用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的開發(fā)者工具我們發(fā)現(xiàn)，這個組件的div上有個類名.ant-select-selection
image.png
于是我們在style標簽中定義class選擇器，并設置它的寬度
<style lang="less" scoped>
.ant-select {
.ant-select-selection {
min-width: 300px;
}
}
</style>
修改完之后，回到瀏覽器，發(fā)現(xiàn)寬度依舊沒有變化，此時通過Chrome的開發(fā)者工具查找元素，我寫的樣式多了一個[data-v-329d3c09]屬性
<style type="text/css">
.ant-select .ant-select-selection[data-v-329d3c09] {
min-width: 300px;
}
</style>
在網(wǎng)上查了一下，原來是scoped的問題，把scoped去掉之后，樣式就編譯成功啦
image.png
去掉scoped我們是解決了樣式不編譯的問題，但從官網(wǎng)上了解到：當一個style標簽擁有scoped屬性時，它的CSS樣式就只能作用于當前的組件。通過設置該屬性，使得組件之間的樣式不互相感染，相當于實現(xiàn)了樣式模塊化。既然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
