react中覆盖antd组件的样式

由于业务的个性化需求，我们经常会遇到需要覆盖组件样式的情况，这里举个简单的例子。

antd Select 在多选状态下，默认会展示所有选中项，这里我们给它加一个限制高度，超过此高度就出滚动条。

TestPage.ts

import {Select } from 'antd';import styles from './TestPage.less';const Option = Select.Option;const children = [];for (let i = 10; i < 36; i++) {children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);}ReactDOM.render(<Selectmode="multiple"style={{width: 300 }}placeholder="Please select"className={styles.customSelect}>{children}</Select>,mountNode,);

TestPage.less

.customSelect {:global {.ant-select-selection {max-height: 51px;overflow: auto;}}}

参考资料

antd-修改样式