javascript - 如何使用 Chakra UI 的 Select 元件來渲染 SVG?
我正在嘗試在 Chakra UI 的 Select 元件的每個選項元件中渲染不同的 SVG,但似乎無法在選項元件內顯示任何圖片。
以下兩個實作都會在選項中顯示 [object Object]。
import SVG from './file.svg'
// Also tried both of the following:
// import SVG from './file.tsx'
// import {ReactComponent as SVG} from './file.svg';
return (
<Select>
<option>
<SVG />
</option>
</Select>
);
import SVG from './file.svg'
return (
<Select>
<option>
<img src={SVG} alt=''/>
</option>
</Select>
);
我能在 Chakra 的 Select 組件中顯示 SVG 的唯一方法是通過 icon 屬性,但那樣會替換下拉選單的圖標,而我不想這麼做。
如果有任何方法可以讓我進一步拆解或減少這個問題,請告訴我。
有沒有方法自訂我的 Select 元件以使用 Chakra UI 渲染 SVG?