单独修改组件库样式/样式穿透/深度选择器

目录

一、修改组件库样式方法

深度选择器的几种写法：

1.sass和less的样式穿透 使用：（/deep/）

2. stylus的样式穿透 使用：（>>>）

3. 通用的样式穿透 使用：（::v-deep）

二、单独修改当前页面内的单个组件样式

样式穿透其他场景应用：v-html

---

存在问题：

Ant Design of Vue、Element UI、Vant等各种组件库固然好用，但官方给定的样式却不符合自家ui的设计风格，我们想要修改却又无从下手，改了却又产生连锁反应，当前页面所有含此类的组件元素都会受影响。在实际项目开发中或在面试中常会遇到如何单独修改当前页面单个组件样式，并且不影响当前页面其他组件样式。

解决方案：

一、修改组件库样式方法

使用样式穿透即可修改，样式穿透要用深度选择器来实现。

首先来介绍此事件的主角 --- 深度选择器

深度选择器的几种写法：

1. sass和less的样式穿透 使用：（/deep/）
2. stylus的样式穿透 使用：（>>>）
3. 通用的样式穿透 使用：（::v-deep）

具体使用介绍：

1.sass和less的样式穿透 使用：（/deep/）

<style lang="scss" scoped>
  .AStockOutDetailTable{
     /deep/ .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
    自定义类名  /deep/ .需修改样式的元素身上的组件库自带类名 {
      想要修改的样式
    }
    当然前方也可以不写自定义的类名 下方两个同样可不加
     /deep/ .需修改样式的元素身上的组件库自带类名 {
      想要修改的样式
    }
  }
</style>

2. stylus的样式穿透 使用：（>>>）

<style lang="stylus" scoped>
  .AStockOutDetailTable >>> .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
   自定义类名 >>> .需修改样式的元素身上的组件库自带类名 {
      想要修改的样式
    }
</style>

3. 通用的样式穿透 使用：（::v-deep）

<style scoped>
  ::v-deep .ant-table-tbody .ant-table-row td {
      padding-top: 8px;
      padding-bottom: 8px;
    }
  自定义类名 ::v-deep .需修改样式的元素身上的组件库自带类名 {
      想要修改的样式
    }
</style>

二、单独修改当前页面内的单个组件样式

单独修改当前页面单个组件样式，并且不影响当前页面其他组件样式其实很简单。

首先给需修改样式元素的父元素添加自定义类名，（注：用于限制样式范围，类似于组合选择器的效果）样式穿透时在深度选择器前添加当前元素的父元素类名即可。（注：为何给父元素添加类名？直接给当前元素添加不更好吗？首先当前元素不好获取，即便获取到了后续也要进行复杂操作，所以不推荐）。

代码实例

<templent>
        <div class="particularly" style="width:597px;height:368px;">
            <!-- 组件库中的多选框使用举例 -->
            <a-checkbox-group @change="onChange" v-model="checkedList">
               <a-row>
                    <!-- 外层父容器div -->
                    <a-col :span="8">
                        <!-- 每一项的多选框 -->
                        <template v-for="item in plainOptions">
                            <a-checkbox v-if="item != '策略19' && item != '策略20'" :value="item">
                                {{ item }}
                            </a-checkbox>
                            <a-checkbox v-else disabled :value="item">
                                {{ item }}
                            </a-checkbox>
                        </template>
                    </a-col>
               </a-row>
            </a-checkbox-group>
        </div>
</templent>
<style scoped>
此类.particularl 用于限制范围
控制台中找到需修改的相关类，如.ant-checkbox-wrapper
限制范围      样式穿透  目标类样式
.particularly >>> .ant-checkbox-wrapper {
    min-width: 85px;
    height: 32px;
    margin: 10px 15px;
    padding-left: 4px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    background-color: #f2f5fd;
}
若是较多元素都含有此类，只想修改其中一项的样式，结合css选择器使用即可
如 .particularly >>> .ant-checkbox-wrapper>div:first-child{}
</style>

样式穿透其他场景应用：v-html

 v-html编译生成的元素要使用深度选择器  >>> 或 ::v-deep 才能添加样式

/* v-html编译生成的元素要使用 >>> 或 ::v-deep 才能添加样式 */
.aaaa::v-deep p img {
    width: 100%;
}
.aaaa>>> p img {
    width: 100%;
}
.父容器 >>> v-html 生成的元素 {
    样式
}