Reactjs MUI ButtonGroup fullWidth 条件屏幕大小不起作用

发布于02月23日

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

我试着在我的ButtonGroup的基础上加fullWidth，但在所有情况下都是true.只是有点困惑.谢谢

推荐答案

ButtonGroup的属性fullWith只接受boolean，为了实现所需的行为，您可以使用useMediaQuery挂钩:

使用breakpoint helpers:

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

...

const matches = useMediaQuery(theme => theme.breakpoints.only('xs'));

...

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

或者:

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

...

const matches = useMediaQuery('max-width:600px');

...

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