如何为选中的MUI React ToggleButton添加勾选图标

你可以通过以下步骤实现需求：

1. 导入MUI的Check图标
   首先从MUI图标库引入Check组件，作为选中状态的勾选标识。

2. 在ToggleButton中条件渲染图标
   针对每个ToggleButton，判断其value是否与当前状态alignment一致，一致则显示勾选图标，否则不显示。同时给按钮添加布局样式，让图标和文字排版更美观。

以下是修改后的完整代码：

import React from 'react';
import { Box, ToggleButtonGroup, ToggleButton } from '@mui/material';
import { grey } from '@mui/material/colors';
import Check from '@mui/icons-material/Check'; // 导入勾选图标

export default function TableBusiness() {
  const [alignment, setAlignment] = React.useState('one'); // 修正初始值，与按钮value匹配
  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,
              display: 'flex',
              gap: 1 // 图标与文字的间距
            }} 
            value="one"
          >
            {alignment === 'one' && <Check fontSize="small" />}
            از ابتدای تاسیس
          </ToggleButton>
          <ToggleButton 
            sx={{
              display: 'flex',
              gap: 1
            }}
            value="two"
          >
            {alignment === 'two' && <Check fontSize="small" />}
            یکسال گذشته
          </ToggleButton>
          <ToggleButton 
            sx={{
              display: 'flex',
              gap: 1
            }}
            value="three"
          >
            {alignment === 'three' && <Check fontSize="small" />}
            یکماه گذشته
          </ToggleButton>
          <ToggleButton 
            sx={{
              borderBottomRightRadius:20, 
              borderTopRightRadius:20,
              display: 'flex',
              gap: 1
            }} 
            value="four"
          >
            {alignment === 'four' && <Check fontSize="small" />}
            جدیدترین
          </ToggleButton>
        </ToggleButtonGroup>
      </Box>
    </Box>
  );
}

关键说明： #

• 修正了初始状态alignment的取值，原代码的'web'与所有按钮value不匹配，改为'one'确保初始有选中状态。
• 给每个ToggleButton添加display: 'flex'和gap: 1样式，让图标与文字横向排列并保持合适间距。
• 使用fontSize="small"调整勾选图标大小，避免影响整体布局。

内容的提问来源于stack exchange，提问作者Elyas Mehraein