如何修改antd里Select的下拉框样式

antd的Select

官方给出的框架用起来是很方便，但是美观程度差强人意，给出的API里虽有className属性，但是这是进行修改Option的样式
我们审查元素可以看到，下拉框是在body中的，这就无法通过在Select外层直接包一层div就来保证不影响其他Select的下拉框样式。

解决

查看antd官方文档，提供了下拉菜单的 className 属性：

方法一

我们可以给Select设置popupClassName='drop' 然后再修改相关的样式。
该api限制antd版本要在 4.23.0，如果低于该版本，应该替换为 dropdownClassName='drop'

// 仅 drop 下的下拉框改变样式
:global {
    .ant-select-dropdown.drop {
        background-color: #000;

        .ant-empty-small {
            color: #fff;
        }

        .ant-select-item.ant-select-item-option {
            color: #fff;
            background-color: transparent;
        }

        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
            color: #8BC2D3;
            background-color: transparent;
        }
    }
}

方法二

Select设置 popupClassName={s.drop}

.drop {
    background-color: #000;

    :global {
        .ant-empty-small {
            color: #fff;
        }

        .ant-select-item.ant-select-item-option {
            color: #fff;
            background-color: transparent;
        }

        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
            color: #8BC2D3;
            background-color: transparent;
        }
    }
}

注意

1.引入的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名 .ant-select-dropdown 必须放到 :global 中。
2.因为上一条的关系，覆盖是全局性的。为了防止对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的生效范围。