自定义ng-zorro组件库中的nz-select下拉框样式

之前基本是直接使用组件库的组件就行，不怎么需要修改样式，而这次UI出图的数据大屏中的下拉框则需要对默认样式进行修改。

默认组件样式如下图所示：

而UI出图的样式则如下：

可以发现每一项后面多了一个小勾，这是默认组件中没有的，查看官方文档发现可以自定义显示的内容

    <div style="display: flex; justify-content: space-between; align-items: center">

        <span>全省</span>

        <i

            nz-icon

            nzType="check"

            nzTheme="outline"

            style="color: #00f6ffff"

            *ngIf="RANGE_TYPE === 1"

        ></i>

    </div>
</nz-option>

这样就可以在前方显示文字，后方显示图标。接下来就需要自定义下拉框的背景样式。

这里查阅文档同样可以发现，可以自定义class从而改变背景样式，但是这里需要在全局样式文件中编写，不然不生效,比如class名称为custom-dropdown，然后在全局样式文件中编写样式代码。

<nz-select [nzDropdownClassName]="'custom-dropdown'"></nz-select>

// 自定义下拉框样式

.custom-dropdown {

    .ant-select-dropdown{

        background-color: rgba(2, 38, 92,0.8); // 例如，改变背景颜色

        border-radius: 4px;

        border: 1px solid #216AD9;

        .ant-select-item {

            color: #fff;

        }

        .ant-select-item-option-active{

            background-color: rgba(2, 38, 92);

        }

        .ant-select-item-option-selected{

            background-color: #084299;

        }

    }

}

结语：刚开始还是有些手足无措的，最后回想起来，还是得多查文档，大多数解决方案可以在文档里找到答案。