Material UI ButtonGroup按屏幕尺寸设置fullWidth不生效求助

问题代码 #

<ButtonGroup
  variant='outlined'
  aria-label='outlined primary button group'
  fullWidth={{xs: true, md: false}}>
  <Tooltip title='Delete' placement='top'>
    <Button
      startIcon={<Delete />}
      color='error'
      onClick={() => props.delete_entry(i)}>
      Delete
    </Button>
  </Tooltip>
  <Tooltip title='Move to Bad List' placement='top'>
    <Button
      startIcon={<ArrowRightAlt />}
      color='success'
      onClick={() => props.badlist_move(i)}>
      Move
    </Button>
  </Tooltip>
</ButtonGroup>

问题原因 #

Material UI的ButtonGroup组件的fullWidth属性仅支持布尔值，不直接接受响应式断点对象（{xs: true, md: false}这种格式）。当你传入对象时，它会被JavaScript判定为true（因为对象是真值），导致所有屏幕尺寸下都启用了fullWidth。

解决方案 #

方案一：使用useMediaQuery动态判断屏幕尺寸

通过useMediaQuery钩子监听当前屏幕断点，动态设置fullWidth的值：

import { ButtonGroup, Button, Tooltip, useMediaQuery, useTheme } from '@mui/material';
import Delete from '@mui/icons-material/Delete';
import ArrowRightAlt from '@mui/icons-material/ArrowRightAlt';

// 组件内部逻辑
const theme = useTheme();
// 仅在xs尺寸下返回true
const isXsScreen = useMediaQuery(theme.breakpoints.only('xs'));

<ButtonGroup
  variant='outlined'
  aria-label='outlined primary button group'
  fullWidth={isXsScreen}>
  <Tooltip title='Delete' placement='top'>
    <Button
      startIcon={<Delete />}
      color='error'
      onClick={() => props.delete_entry(i)}>
      Delete
    </Button>
  </Tooltip>
  <Tooltip title='Move to Bad List' placement='top'>
    <Button
      startIcon={<ArrowRightAlt />}
      color='success'
      onClick={() => props.badlist_move(i)}>
      Move
    </Button>
  </Tooltip>
</ButtonGroup>

方案二：用Box组件包裹实现响应式宽度

利用Box组件支持响应式width属性的特性，让ButtonGroup始终占满父容器宽度，再通过Box控制不同断点下的宽度：

import { ButtonGroup, Button, Tooltip, Box } from '@mui/material';
import Delete from '@mui/icons-material/Delete';
import ArrowRightAlt from '@mui/icons-material/ArrowRightAlt';

<Box width={{ xs: '100%', md: 'auto' }}>
  <ButtonGroup
    variant='outlined'
    aria-label='outlined primary button group'
    fullWidth={true}>
    <Tooltip title='Delete' placement='top'>
      <Button
        startIcon={<Delete />}
        color='error'
        onClick={() => props.delete_entry(i)}>
        Delete
      </Button>
    </Tooltip>
    <Tooltip title='Move to Bad List' placement='top'>
      <Button
        startIcon={<ArrowRightAlt />}
        color='success'
        onClick={() => props.badlist_move(i)}>
        Move
      </Button>
    </Tooltip>
  </ButtonGroup>
</Box>

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