我正在嘗試為材質 ui 選擇組件實作我自己的圖示。到目前為止，我已經設法使用“IconComponent”MU 選擇屬性來更改默認圖示。
但是在打開選單串列時 newIcon 不會旋轉，就像默認圖示一樣，此外，帶有值的選單在單擊時不會打開。只有當我單擊選擇組件本身而不是新圖示時才會出現 ListIteam。
我已經測驗了兩個不同的圖示（anotherIcon 和 newIcon），但問題仍然存在。
const newIcon = (
<svg
width="38"
height="38"
viewBox="0 0 38 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="0.5" y="0.5" width="37" height="37" rx="9.5" stroke="#222426" />
<svg
width="18"
height="12"
x="10"
y="13"
viewBox="0 0 18 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.66732 0.999999L8.72964 10.8681C8.76363 10.9095 8.80536 10.9428 8.85208 10.9655C8.89879 10.9882 8.94943 11 9.00065 11C9.05187 11 9.10251 10.9882 9.14922 10.9655C9.19594 10.9428 9.23767 10.9095 9.27167 10.8681L17.334 1"
stroke="#222426"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</svg>
);
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
IconComponent={() => <div className="test">{newIcon}</div>}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
我還嘗試手動超速選擇 iconOpen 類，以使圖示變換和旋轉 180 度（在這種情況下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/432802.html
標籤：javascript css svg 材料-ui 图标