如何將復選圖標添加到選定的 MUI React ToggleButton？

Question

我的問題很簡單，如何在選定的 ToggleButton 中添加復選圖標？ 堆棧流不會讓我發布它我只是沒有其他解釋 pleaseeeee

export default function TableBusiness() {
  const [alignment, setAlignment] = React.useState('web');

  const handleChange = (event, newAlignment) => {
    setAlignment(newAlignment);
  };
  return (
    <Box
      sx={{
        p: 2,
        display: 'flex',
        flexWrap: 'wrap',
        '& > :not(style)': {

          width: "100%",
          height: 1000,

        },
      }}
    >
        <Box
          display="flex"
          
          justifyContent="space-around"
        >

          <ToggleButtonGroup
            color="primary"
            sx={{ borderRadius: '40px !important', backgroundColor: grey[50]}}
            value={alignment}
            exclusive
            onChange={handleChange}
            aria-label="Platform"
            

          >
            <ToggleButton sx={{borderBottomLeftRadius:20 , borderTopLeftRadius:20}} value="one">از ابتدای تاسیس</ToggleButton>
            <ToggleButton borderRadius= '30px' value="two">یکسال گذشته</ToggleButton>
            <ToggleButton value="three">یکماه گذشته</ToggleButton>
            <ToggleButton sx={{borderBottomRightRadius:20 , borderTopRightRadius:20}} value="four">جدیدترین</ToggleButton>
          </ToggleButtonGroup>
        </Box>

  );
}

我想在每個選定的 ToggleButton 左側看到一個復選標記

Answer 1

只需檢查 ToggleButton 的值是否對應於“對齊”中選擇的值。 與此類似：

<ToggleButton sx={{borderBottomLeftRadius:20 , borderTopLeftRadius:20}} value="one">
{alignment==='one'&&<CheckIcon/>}از ابتدای تاسیس
</ToggleButton>