Antd Select 设置偏移量

对于Select 组件我要想实现如下效果，该如何处理呢？

我们查看你select组件https://ant.design/components/select-cn#select-props 并没有相关的属性API,如何去处理这个呢？

添加 dropdownAlign={{ offset: [0, 30] }} 这个属性，可以设置偏移量

 <Select
      allowClear
      dropdownAlign={{ offset: [0, 30] }}
      className={style.select}
      options={[
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled', disabled: true }
      ]}
    ></Select>

，可以看https://github.com/ant-design/ant-design/issues/31153 中有一点描述

那如何使用css module 去覆盖Select的样式呢？

可以查看我在掘金的这篇文章，很详细的讲解了global和local的使用

https://juejin.cn/post/7203224726360293435

index.scss 简单的讲解一下如何去覆盖这些样式

.select {
  position: relative;
  margin: 50px;
  margin-right: 12px;
  height: 40px;
}

:global {
  :local(.select) {
    &.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
      border: 1px solid #e5e5e6;
      border-radius: 2px;
      height: 100%;
    }

    &.ant-select:not(.ant-select-disabled, .ant-select-customize-input, .ant-pagination-size-changer):hover
      .ant-select-selector {
      border: 1px solid #265cf0;
    }
  }
}

这样我们就可以很完美的定制自己喜欢的Select了