I am currently using a MaterialUI divider that is set to be vertical on md and large screens. However, I want it to switch to being horizontal on xs and sm screens:
<Divider orientation="vertical" variant="middle" flexItem />
I have attempted the following:
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));
<Divider orientation={isSmallScreen ? 'horizontal' : 'vertical'} variant='middle' flexItem />
I also tried enclosing it in a Grid.
However, the divider does not seem to appear on xs and sm screens.
This is the complete JSX section:
<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>
Has anyone encountered this issue before?