const StyledToggleButton = styled(MuiToggleButton)(({ selectedColor }) => ({
"&.Mui-selected, &.Mui-selected:hover": {
backgroundColor: selectedColor,
}
}));
const FilterTeam = (props) => {
const [view, setView] = useState(1);
const handleChange = (event: any, nextView: any) => {
setView(nextView);
};
return (
<ToggleButtonGroup
orientation="horizontal"
value={view}
exclusive
onChange={handleChange}
>
{ Object.values(teams).map((teamObject: any, index) =>
<StyledToggleButton
key={teamObject.team}
className={classes.toggleButton}
value={teamObject.team}
selectedColor={teamObject.colorTheme}
>
<img className={classes.teamLogo}
alt="team logo" src={teamObject.logo} />
</StyledToggleButton>
)}
</ToggleButtonGroup>
);
}
export default FilterTeam
我不斷得到：Warning: React does not recognize the selectedColor prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseselectedcolor instead. If you accidentally passed it from a parent component, remove it from the DOM element.。我已經檢查了幾個實作相同的沙箱，但我正在打字稿上嘗試它，所以我不確定它是如何轉換的。我參考了
情感檔案：https ://emotion.sh/docs/styled#customizing-prop-forwarding
相關答案：@mui/system -- 如何將瞬態道具傳遞給 styled()
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/442538.html
標籤：javascript 反应 打字稿 材料-ui