如何更改所选选项卡的svg图标的颜色

Question

我想知道如何最有效地更改所选选项卡的图标颜色。

const [trainColor, setTrainColor] = React.useState('')
const [busColor, setBusColor] = React.useState('')
return (
<StyledSectionContainer>
<InnerContainer>
<Tabs.Root defaultValue="tab1">
<StyledTabsList aria-label="tabs example">
<StyledTabsTrigger value="tab2">
<Train
color={trainColor}
onClick={() => setTrainColor(theme.color.orange)}
/>
</StyledTabsTrigger>
<StyledTabsTrigger value="tab3">
<Bus
color={busColor}
onClick={() => setBusColor(theme.color.orange)}
/>
</StyledTabsTrigger>  
</StyledTabsList>

Answer 1

Radix图标使用currentColor，因此，请尝试使用提供颜色的div包装图标：

<div style={{ color: trainColor}}><Train onClick={...} /></div>