Antd Select 组件模式多重、复选框样式

Question

使用antd NPM包，选择组件，在多种模式下，默认会在右侧显示复选框。我想将其向左对齐，并将其样式设置为框中的刻度线，后跟标签。另外，需要单独的搜索框，请参阅添加的屏幕截图。我想知道这可能吗？我不想使用任何其他包。

搜索了很多但无法获得任何帮助。

提前致谢。

Answer 1

这是可能的，但它破坏了antd.

您已经有一个Select实现检查、下拉和搜索的组件：

对于您的情况，您需要使用组件的组合自行实现和测试它antd：

• Input.Search
• Checkbox
• Dropdown
• Menu

最小的例子：

const menu = (
  <Menu>
    <Menu.Item>
      <Checkbox>User1</Checkbox>
    </Menu.Item>
    <Menu.Item>
      <Checkbox>User2</Checkbox>
    </Menu.Item>
  </Menu>
);
export default function App() {
  return (
    <FlexBox>
      <Dropdown.Button overlay={menu}>Dropdown</Dropdown.Button>
    </FlexBox>
  );
}