前端踩坑(三)(vue)修改樣式無效

在這裏插入圖片描述
在這裏插入圖片描述
vue引用了第三方組件,需要在組件中局部修改第三方組件的樣式,而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過>>>,穿透scoped。
有些Sass 之類的預處理器無法正確解析 >>>。可以使用 /deep/ 操作符( >>> 的別名)

passenger-search-form是我賦予整個表單的class,取什麼名字都可以。

<style scoped>
/* 使得寬度可以自適應 */
.passenger-search-form >>> .el-form-item {
  width: 100% ;
}
.passenger-search-form >>> .el-form-item__label {
  width: 35% ;
}
.passenger-search-form >>> .el-form-item__content {
  width: 60% ;
}
.passenger-search-form >>> .el-select {
  width: 100% ;
}
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章