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道具的自定義圖標將幫助您