繁体   English   中英

如何将复选图标添加到选定的 MUI React ToggleButton?

[英]how to add check icon to selected MUI React ToggleButton?

我的问题很简单,如何在选定的 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 左侧看到一个复选标记

只需检查 ToggleButton 的值是否对应于“对齐”中选择的值。 与此类似:

<ToggleButton sx={{borderBottomLeftRadius:20 , borderTopLeftRadius:20}} value="one">
{alignment==='one'&&<CheckIcon/>}از ابتدای تاسیس
</ToggleButton>
①如果本文未解决您的问题,请点击查看与本文相关的问题
②如果本文未解决您的问题,请向程序员专用AI小助手提问
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM