我正在努力自定義自動完成串列中的選項元素。我想通過使用 renderOptions 道具來做到這一點，我可以在其中創建 DOM 元素。然后，我可以很容易地添加帶有 sx 或樣式組件的樣式。
但有些不對勁。當我嘗試渲染包含在 div 中的選項串列元素時，電影的名稱被隱藏（？）它們被渲染，因為我仍然可以選擇選項，然后它顯示為選中，但輸入串列仍然損壞，并且不應用 CSS 樣式。
我錯過了什么？自動完成及其樣式對我來說是新的。
編碼：
<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderOption={(props, option) => {
return (
<li {...props}>
<div
sx={{
backgroundColor: "red",
color: "orange"
}}
>
{option.title}
</div>
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: "search"
}}
/>
)}
/>
</Stack>
);
}
下面是演示： https ://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js
uj5u.com熱心網友回復：
TL;DR只需更改option.title為optioninrenderOption道具。并使用Box而不是div應用樣式。
我找不到它在檔案中明確說明，但顯然每個傳遞給的元素options隨后都renderOption作為option引數傳遞給。
因此，由于您已經將option.title字串陣列傳遞給options您，因此您需要像option在renderOptionprop 中一樣參考它們。
該sx道具由 MUI 組件使用。所以請改成里面div的MUIBox組件renderOption。Box是專門為此類情況創建的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/463341.html
標籤：javascript css 反应 材料-ui 自动完成
上一篇：使用深拷貝的陣列物件
下一篇：錯誤：[未定義]不是<Route>組件。<Routes>的所有子組件必須是<Route>或<React.Fragment>