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

Sigo recibiendo: Warning: React does not recognize the elemento de color seleccionado prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase instead. If you accidentally passed it from a parent component, remove it from the DOM element. . Revisé un par de sandbox que implementan lo mismo, pero lo estoy probando en mecanografiado, así que no estoy seguro de cómo se convierte. Me he referido a https://codesandbox.io/s/69707814-set-selected-color-of-toggle-button-group-mui-5l5lh?file=/demo.js