为何两个Material UI Autocomplete组件的选项背景样式存在差异？

样式不一致根因 #

两个Autocomplete组件传入的options参数结构不统一：其中一个传入的是{id: 数值, label: 文本}格式的对象数组，另一个传入的是纯字符串数组。MUI Autocomplete默认仅对对象类型的选项自动应用hover态、选中态的浅蓝色背景样式，纯字符串选项没有对应默认样式规则，因此出现视觉差异。

isOptionEqualToValue 报错根因 #

当你将匹配逻辑修改为option.label === value.label时，React Hook Form绑定的对应表单字段值为纯字符串类型，并非预期的对象结构，此时value.label返回undefined，无法匹配到任何option，因此触发MUI的无效值报错。

修复方案 #

• 所有Autocomplete的options统一使用{id: 唯一标识, label: 展示文本}的对象结构，不要混用字符串数组
• 给每个Autocomplete显式添加getOptionLabel={option => option.label}属性，明确指定选项的展示文本规则，避免MUI自动推断逻辑异常
• isOptionEqualToValue保持option.id === value.id的匹配逻辑即可，同时保证React Hook Form对应字段的默认值、提交处理逻辑都接收对象格式的值，不要转存为纯字符串

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