我的專案中有 4 個來自 MUI 的 ButtonGroup，其中每個都有 SVG 圖示和子項作為按鈕的名稱。雖然按鈕的背景和名稱一旦被選中就起作用，但 SVG 圖示始終保持相同的顏色。如何使它作業并且 SVG Icon 也會在選擇時改變顏色？
下面是它是如何構建的示例：
<StyledToggleButtonGroup
color="warning"
value={alignment}
exclusive
onChange={handleAlignment}
>
<StyledToggleButton
aria-label={DetailsTranslation}
onClick={() => handleGoToDetails()}
value={Routes.TrainsDetails.path}
aria-pressed="true"
>
<StyledDetailsIcon />
{DetailsTranslation}
</StyledToggleButton>
<StyledToggleButton
aria-label={LinesTranslation}
onClick={() => handleGoToLines()}
value={Routes.TrainsDetailsLines.path}
>
<StyledLinesIcon />
{LinesTranslation}
</StyledToggleButton>
<StyledToggleButton
aria-label={WheelsTranslation}
onClick={() => handleGoToWheels()}
value={Routes.TrainsDetailsWheels.path}
>
<StyledWheelIcon />
{WheelsTranslation}
</StyledToggleButton>
<StyledToggleButton
aria-label={ServiceTranslation}
onClick={() => handleGoToService()}
value={Routes.TrainsDetailsService.path}
>
<StyledServiceIcon />
{ServiceTranslation}
</StyledToggleButton>
</StyledToggleButtonGroup>
</TrainsDetailsToolbarWrapper>
以及第一個按鈕的樣式：
export const StyledToggleButton = styled(ToggleButton)`
font-size: 1.6rem;
font-weight: bold;
font-family: Poppins;
margin: 0.5rem;
padding: 0.5rem 1rem 0.5rem 1.5rem;
border-radius: 0.4rem;
border: none;
`;
export const StyledDetailsIcon = styled(MenuIcon)`
margin-right: 1.3rem;
`;
uj5u.com熱心網友回復：
還有
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/343503.html
上一篇：從adobeillustrator匯出的svg檔案不會在HTMLCanvas上呈現
下一篇：如何將這些SVG路徑制作成掩碼？