如何自定义 Ant Design Select 选项样式

要修改 Ant Design Select 中选项的样式，可以使用以下方法：

1. 使用'className'属性来添加自定义的样式类，然后使用 CSS 来修改样式。例如：

<Select className='custom-select'>
  <Option value='1'>Option 1</Option>
  <Option value='2'>Option 2</Option>
</Select>

.custom-select .ant-select-item-option {
  color: red;
}

2. 使用'style'属性来直接在组件中添加内联样式。例如：

<Select>
  <Option value='1' style={{ color: 'red' }}>Option 1</Option>
  <Option value='2' style={{ color: 'blue' }}>Option 2</Option>
</Select>

3. 使用'getPopupContainer'属性来指定选项的父级容器，然后使用 CSS 选择器来修改样式。例如：

const getPopupContainer = () => document.getElementById('custom-popup-container');

<Select getPopupContainer={getPopupContainer}>
  <Option value='1'>Option 1</Option>
  <Option value='2'>Option 2</Option>
</Select>

#custom-popup-container .ant-select-item-option {
  color: red;
}

注意：以上方法中，可以根据需要修改的具体样式来修改 CSS。在第三种方法中，'getPopupContainer'函数需要返回一个父级容器的 DOM 节点，用于渲染选项的下拉框。