MUI ToggleButton 动态设置选定的背景色

Question

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 selectedColorprop 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.。我已经检查了几个实现相同的沙箱，但我正在 typescript 上尝试它，所以我不确定它是如何转换的。我提到了 https://codesandbox.io/s/69707814-set-selected-color-of-toggle-button-group-mui-5l5lh?file=/demo.js

Answer 1

您可以使用 shouldForwardProp option to styled 来防止 selectedColor 道具被转发到 ToggleButton（然后将其传递到 DOM元素）。

const ToggleButton = styled(MuiToggleButton, {
  shouldForwardProp: (prop) => prop !== "selectedColor"
})(({ selectedColor }) => ({
  "&.Mui-selected, &.Mui-selected:hover": {
    color: "white",
    backgroundColor: selectedColor
  }
}));

情感文档：https://emotion.sh/docs/styled#customizing-prop-forwarding

MUI ToggleButton 动态设置选定的背景色

MUI ToggleButton set selected background-colour dynamically

javascript

typescript

reactjs

material-ui