antdv使用a-cascader联级选择器实现自定义浮层样式

一般的使用组件库想要自定义样式都会使用深度选择器deep去实现
但是有的组件不管是deep还是!important还是写行内样式都改不掉
这里主要讲使用a-cascader联级选择器的浮层改变样式

一，使用组件

<a-cascader
                    :options="regionOptions"
                    change-on-select
                    v-model="queryParams.regionCode"
                    allowClear
                    placeholder="请选择"
                    style="width: 160px"
                    :field-names="{
                      label: 'title',
                      value: 'id',
                      children: 'children',
                    }"
                    :display-render="displayRender"
                    @change="changeVideoRegion"
                  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这是组件自带的浮层样式，但我想使用的是灰色代替白底色，因为我有自带的背景色且不是白色

二，然后打开打印台找到控制样式的选择器

首先我的第一选择就是深度选择器，然后发现打印台根本没有自己写的样式，没生效
然后我就在深度选择器写的样式后面加了一个!important，一样没生效

然后我就在组件中行内写一个class="custom-cascader"然后再写样式，还是没生效

然后我就在api找看有没有属性是修改样式的，然后找到了可以自定义浮层的样式名称

然后直接在组件中写

<a-cascader
                    :options="regionOptions"
                    change-on-select
                    v-model="queryParams.regionCode"
                    allowClear
                    placeholder="请选择"
                    style="width: 160px"
                    :field-names="{
                      label: 'title',
                      value: 'id',
                      children: 'children',
                    }"
                    :display-render="displayRender"
                    @change="changeVideoRegion"
                    popupClassName="custom-cascader-popup"
                  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

然后我就在下面写样式，但是！！依旧没有生效，这就玄幻了，明明在打印台已经看到组件有这个类名了啊，后来一想应该是样式中加了scoped导致的，然后重新写了标签，成功了！！！

后来发现浮层不是跟随选择器的发现了这个api属性，一起改了

还用深度选择器修改了选择框的样式

三，下面是完整的修改，顺便还改了滚动条的样式

组件部分

<a-cascader
                    :options="regionOptions"
                    change-on-select
                    v-model="queryParams.regionCode"
                    allowClear
                    placeholder="请选择"
                    style="width: 160px"
                    :field-names="{
                      label: 'title',
                      value: 'id',
                      children: 'children',
                    }"
                    :display-render="displayRender"
                    @change="changeVideoRegion"
                    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                    popupClassName="custom-cascader-popup"
                  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

样式部分

<style>
.custom-cascader-popup {
  background: #222222;
  color: rgba(255, 255, 255, 0.65);
}

.custom-cascader-popup .ant-cascader-menu-item-expand-icon {
  color: rgba(255, 255, 255, 0.65);
}

.custom-cascader-popup
  .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled):hover {
  color: #009fe8;
  background: transparent;
}

.custom-cascader-popup .ant-cascader-menu-item:hover {
  background: transparent;
}

.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 1px;
}

.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: rgba(255, 255, 255, 0.4);
}

.custom-cascader-popup .ant-cascader-menu::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(255, 255, 255, 0.15);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<style scoped lang="less">
.enlarge-and-video {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 999;
  background-color: #000000;

  .enlarge-space {
    width: 100%;
    height: calc(~"100vh - 63px");
	:deep(.ant-form-item-label > label) {
      color: rgba(255, 255, 255, 0.85);
    }

    :deep(.ant-cascader-picker) {
      background-color: transparent;
    }

    :deep(.ant-cascader-input.ant-input) {
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    :deep(.ant-cascader-picker-arrow) {
      color: rgba(255, 255, 255, 0.25);
    }

    :deep(.ant-cascader-picker-clear) {
      color: rgba(256, 256, 256, 0.85);
      background: transparent;
    }

    :deep(.ant-cascader-picker-label) {
      color: rgba(255, 255, 255, 0.65);
    }
 
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41