如何基于Material-UI实现参考图样式的预置选项多选组件？

当前方案合理性说明 #

你目前用多个<Button>模拟的方案是完全合理的。你要实现的是平铺式多选标签选择器，核心交互就是点击切换单选项的选中/未选中状态，用按钮模拟完全符合交互逻辑，觉得视觉效果不好大概率是没有做选中态、未选中态的样式区分，以及没有调整按钮之间的间距、圆角细节。

你之前排除<Switch>和<Select>组件的判断也是正确的：

• <Switch>是单条目的二元开关组件，天生适合单个配置项的开/关控制，不符合多选项平铺选择的场景
• <Select>的多选模式是下拉交互，选中结果会收拢在输入框内，无法直接展示所有预置选项，和需求匹配度很低

更适配的替代方案 #

1. 基于现有组件库实现 #

如果你的项目引入了Ant Design、Element UI、MUI这类前端组件库，优先用以下现成方案，不用自己手写大量样式和交互逻辑：

• 使用Tag组件的可选择模式：大部分组件库的标签组件都原生支持点击切换选中状态，默认自带选中/未选中的样式区分，和你预期的效果图匹配度极高，只需要循环渲染所有预置选项为可选择标签即可，还自带了间距、圆角的预设样式，调整成本极低。
• 使用自定义样式的Checkbox组件：隐藏Checkbox默认的勾选框，把整个选项区域设置为点击热区，切换时修改容器的背景、文字样式即可，天生支持多选表单的数据绑定，不需要自己额外维护选中状态的同步逻辑。

2. 原生/自定义封装实现 #

如果没有用组件库，自己封装的逻辑也非常简单：

• 用一个数组存储当前选中的选项值
• 循环渲染所有预置选项，给每个选项绑定点击事件：点击时判断当前选项值是否在选中数组中，存在则移除，不存在则加入
• 样式上给选中态设置差异化的背景色、文字色、边框色，可选加入小对勾图标强化选中感知，就能实现你要的效果。

内容的提问来源于stack exchange，提问作者whitebear