对于Select 组件我要想实现如下效果,该如何处理呢?
![](https://i-blog.csdnimg.cn/blog_migrate/4820094cfe1f7714fbaf5ba51e80bfc4.png)
我们查看你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了