javascript - MUI ToggleButton đặt màu nền được chọn một cách động

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

Tôi liên tục nhận được: Cảnh báo: React không nhận dạng selectedColorprop trên một phần tử DOM. Nếu bạn thực sự muốn nó xuất hiện trong DOM như một thuộc tính tùy chỉnh, hãy viết nó bằng chữ thườngselectedcolorthay vào đó. Nếu bạn vô tình truyền nó từ một component cha, hãy loại bỏ nó khỏi phần tử DOM.. Tôi đã xem qua một vài sandbox triển khai tương tự nhưng tôi đang thử trên TypeScript nên không chắc cách nó chuyển đổi. Tôi đã tham khảo https://codesandbox.io/s/69707814-set-selected-color-of-toggle-button-group-mui-5l5lh?file=/demo.js

Câu trả lời #1

Bạn có thể sử dụng tùy chọn shouldForwardProp cho styled để ngăn prop selectedColor được truyền tiếp đến ToggleButton (mà sau đó nó lại truyền prop này đến phần tử DOM).

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

Tài liệu về Emotion: https://emotion.sh/docs/styled#customizing-prop-forwarding

Câu trả lời liên quan: @mui/system -- làm thế nào để truyền các props tạm thời cho styled()