React 针对 ant Design select 组件进行二次封装

React 针对 ant Design 库 select 组件进行二次封装

由于业务需要对select进行样式上的修改，部分select还需要使用原样式。这种情况可以通过两种方式来实现：

1 通过className进行样式覆盖

2 通过二次封装组件，相对于仅修改css样式来说更加的灵活

本次介绍第二种方式对组件进行二次封装

/*
* @Date 2020/5/8
* @Author zuolinya
* @Description antd select组件 二次封装
* 1 设置为圆角
*/
import React from "react";
import { Select } from "antd";
import './index.less'

class JrSelect extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {
    const { className } = this.props
    return (
      <Select {...this.props} className={`${className} round_select`}>
        {this.props.children}
      </Select>
    );
  }
}

export default JrSelect;

css部分index.less

.round_select {
  border-radius: 50%;

  .ant-select-selector {
    border-radius: 50px !important;
  }
}

如有问题请联系我~

欢迎加入QQ群: