Antd Select Component 模式多重，复选框样式答案

【问题标题】：Antd Select Component mode multiple, checkbox stylingAntd Select Component 模式多重，复选框样式
【发布时间】：2020-01-08 08:48:55
【问题描述】：

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

搜索了很多，但没有得到任何帮助。

提前致谢。

【问题讨论】：

我需要创建一个类似的组件。你能分享你使用的方法吗？
嘿@devb，你在使用ANTD吗？我选择了 ANTD 现有的 UI。但是如果你使用的是ANTD，则需要自定义很多。您可以使用自定义下拉菜单在菜单之前添加搜索输入，ant.design/components/select/…，然后在选项中添加复选框组件。但这将是很多编码。先决定是否值得，然后去争取。
感谢您的回复...我已经对其进行了自定义，将尝试为其他正在寻找它的人提供答案...

标签： javascript reactjs drop-down-menu antd

【解决方案1】：

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

带有isSelected 属性的自定义图标将为您提供帮助

【讨论】：

【解决方案2】：

这是可能的，但它打破了antd的Design System。

您已经有一个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>
  );
}

【讨论】：