Responsive MaterialUI Divider，在小屏幕上是水平的，在md和大屏幕上是垂直的

Question

我使用这个MaterialUI分配器，它是md和large屏幕中的vertical。然而，我希望它是xs和sm屏幕的horizontal:

<Divider orientation="vertical" variant="middle" flexItem />

我也试过了:

const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));
<Divider orientation={isSmallScreen ? 'horizontal' : 'vertical'} variant='middle' flexItem />

也试过用Grid来包装。

但是我在xs和sm屏幕上看不到任何分隔符。

这是整个JSX部分:

<Card>
<Grid2 container spacing={4} sx={{ minWidth: { xs: '100%', md: '715px' } }}>
<Grid2 xs={12} md={4}>
{booking_items.map(item => (
<React.Fragment key={`${id}-${item.title}`}>
<Typography variant='subtitle2'>{item.title}</Typography>
<CardMedia component='img' image={item.imageUrl} title={item.title} />
</React.Fragment>
))}
</Grid2>
<Divider orientation={isSmallScreen ? 'horizontal' : 'vertical'} variant='middle' flexItem /> 
<Grid2 xs={12} md={8}>
<CardContent>
<Stack direction='row' spacing={1}>
<CalendarBlankIcon sx={iconStyle} />
<Typography variant='body1'>
{formatDate(start_date)} - {formatDate(end_date).split(' at ')[1]}
</Typography>
</Stack>
<Stack direction='row' spacing={1}>
<UserAltIcon sx={iconStyle} />
<Typography variant='body1'>{people} people</Typography>
</Stack>
<Stack direction='row' spacing={1}>
<MapMarkerIcon sx={iconStyle} />
<Typography variant='body1'>{address}</Typography>
</Stack>
<Box sx={{ display: 'flex', justifyContent: 'flex-end', mt: '25px' }}>
<Button variant='text' color='secondary' endIcon={<ChevronRightIcon />}>
View Booking
</Button>
</Box>
</CardContent>
</Grid2>
</Grid2>
</Card>

知道为什么吗?

Answer 1

"基本上是= 0px。然后，isSmallScreen只在屏幕大小为负值时求值为true，恐怕