Material UI - ButtonGroup fullWidth conditional with screen size not working?

Question

<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>

I tried to add fullWidth to my ButtonGroup, but it remains true for all cases. Just confused. Thanks

Answer 1

the property fullWith of ButtonGroup accepts only a boolean, in order to achieve the desired behavior you can use the useMediaQuery hook:

Using breakpoint helpers:

import useMediaQuery from '@mui/material/useMediaQuery';

...

const matches = useMediaQuery(theme => theme.breakpoints.only('xs')); // true | false

...

<ButtonGroup
 variant="outlined"
 aria-label="outlined primary button group"
 fullWidth={matches}
>

Or:

import useMediaQuery from '@mui/material/useMediaQuery';

...

const matches = useMediaQuery('(max-width:600px)'); // true | false

...

<ButtonGroup
 variant="outlined"
 aria-label="outlined primary button group"
 fullWidth={matches}
>