为啥我的 Material UI 自动完成元素之一的选项具有蓝色背景，而另一个没有？ （包括代码沙箱）

Posted 2023-02-21

【中文标题】为啥我的 Material UI 自动完成元素之一的选项具有蓝色背景，而另一个没有？ （包括代码沙箱）

【英文标题】：Why does one of my Material UI autocomplete elements have a blue background for the options, but the other doesn't? (includes code sandbox)为什么我的 Material UI 自动完成元素之一的选项具有蓝色背景，而另一个没有？ （包括代码沙箱）

【发布时间】：2022-01-05 21:50:37

【问题描述】：

最终编辑：我最终找到了一个修复程序，并用它更新了我的沙箱！

编辑：我已经确定这是由于自动完成中的这一行...

isOptionEqualToValue=(option, value) => option.id === value.id

但是，如果我尝试将其更改为此...

isOptionEqualToValue=(option, value) => option.label === value.label

我在控制台中收到以下错误...

useAutocomplete.js:219 MUI：提供给自动完成的值是 无效的。没有一个选项与@​​987654325@ 匹配。您可以使用 isOptionEqualToValue 属性来自定义相等测试。

---

我使用 Material UI 和 React Hook Form 创建了以下表单...

https://codesandbox.io/s/inputquestion-jyq5b?file=/src/App.js

我很困惑为什么两个自动完成元素的样式不同，选项/选项悬停的浅蓝色背景，但另一个不是。

提前感谢您提供的任何帮助！

【问题讨论】：

两者在您共享的codesandbox 中看起来相同。在您的情况下，自动完成的浅色背景之一可能是由于输入 browser is auto filling 并显示该自动完成的 light blue 背景。

【参考方案1】：

可能是因为带有disabledPortal 属性的那个是在容器（Box）中呈现的，并且具有应用的样式。另一个将默认 disablePortal 值设置为 false，因此它使用 react 门户呈现，因此位于 Box 之外。尝试将这个道具设置为相同，看看它们是否相同。

【讨论】：

感谢您的回复！我尝试将 disablePortal 添加到药物表单元素，但它没有改变选项背景的颜色。这就是你要我尝试的意思吗？