網站搜尋

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?