如何将复选图标添加到选定的 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>