javascript - 如何在不删除自动完成中的选择的情况下禁用 Material-UI 中的下划线?
问题描述
我想Autocomplete
用TextField
没有下划线的组件创建。InputProps={{ disableUnderline: true }}
我在道具中禁用了下划线TextField
,它完成了它的工作,但它也删除了选择栏,所以问题是,如何在不删除选择栏的情况下完成此操作?
解决方案
要再次启用下拉列表,您还需要在嵌套属性中传播所有提供的道具 ( InputProps
)。所以替换这一行
<TextField {...params} InputProps={{ disableUnderline: true }} />
和:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
完整的工作代码:
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>
现场演示
推荐阅读
- java - 运行我的世界生成代码最终会出现 2 个或更多 ArrayIndexOutOfBoundsExceptions
- linux - 使用某些解决方案通过 ipmi 自动安装操作系统
- webrtc - 单个 TURN 服务器是否足以支持受限 NAT 配置的两个设备?
- html - 文本垂直居中问题
- python - Pandas Dataframe 到 CSV,但写下 n 行
- java - 双向流上的反应器 gRPC 行为
- ios - 如何快速在图像上绘制矩形
- kotlin - 在 IntelliJ 中提取 Kotlin 代码中的变量会自动选择变量的名称
- android - 如何将 android studio 模拟器连接到真正的 WiFI 和/或通过 ip 访问模拟设备
- windows - 将变量的标题属性附加到此字符串?