Antd Select Component 模式多个，复选框样式

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>
  );
}

Answer 2

Antd Select 建立在rc-select [ 1 ] 之上，所以你可以在他们的 repo 中找到想法，注意 Antd 省略了一些 props，重新检查类型定义。

带有isSelected道具的自定义图标将帮助您