Check out the official documentation here
Customize component styles
Sometimes, for specific project requirements, we need to customize the style of a component. Here is a simple example.
For the Antd Select component in multi-select mode, all select items are displayed by default. In this example, a maximum height is set to show a scrollbar when the content exceeds this height.
// SamplePage.ts
import { Select } from 'antd';
import styles from './SamplePage.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(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* SamplePage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Key points to remember:
The class name of the imported antd component cannot be modified with CSS Modules, so the overridden class name .ant-select-selection must be placed in :global.
Since the override is global due to the previous point, it's important to wrap the styling within an extra classname to avoid affecting other Select components.