Antd Select 设置偏移量

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

Antd Select 设置偏移量_第1张图片

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

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

 

,可以看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了

你可能感兴趣的:(组件,antd,前端,javascript,react.js,css)