[Joy] Media query usage

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I’d like to be able to import and use useMediaQuery with Joy UI just like Material UI supports to adapt my layout for different screen sizes

Examples 🌈

import { Button, IconButton, useMediaQuery } from '@mui/joy'
import SettingsIcon from '@mui/icons-material/Settings'

const NavigationBar = () => {
    let isScreenMobile = useMediaQuery((theme) =>
        theme.breakpoints.down('mobile')
    )

    return (
        <div>
            {isScreenMobile ? (
                <Button startDecorator={<SettingsIcon />}>
                    Settings
                </Button>
            ) : (
                <IconButton>
                    <SettingsIcon />
                </IconButton>
            )}
        </div>
    )
}

Motivation 🔦

I’m trying to adapt my interface to have my navigation bar show just an IconButton when on a tablet or larger sized screen, but a larger regular Button with an icon when on a mobile sized screen. At the moment I appear to be unable to do so without something like useMediaQuery which has access to my theme’s media breakpoints, which makes the app less friendly and functional on mobile. While the sx prop is very useful for adapting individual components, it’s common to want to render entirely different components at different breakpoints.

For reference, my breakpoints are set to:

mobile: 0,
tablet: 640,
laptop: 1024,
desktop: 1200

Many well-designed web apps like Twitter have elements like side bars that collapse, disappear completely (like the “What’s happening” bar on the righthand side) or are replaced by new layouts (like the navigation bar on the lefthand side, which collapses at smaller sizes and is wholly replaced by a bottom navigation bar on mobile). This kind of adaptability is essential for designing a responsive/mobile-friendly app.

If there’s a workaround in the meantime I’d be happy to learn it! I love the aesthetic of Joy UI much more than Material UI 2, so am eager and making an effort to use it although it’s still in alpha.

[siriwatknp]

After reading the original issue, it is not about the Modal. I will try to add some docs about the media query to Joy UI.

[siriwatknp]

Honestly, I don’t recommend using JS to switch between layouts. Always use CSS if you can.

This is better for sure:

<Modal open onClose={onClose}>
    <ModalDialog layout="center" sx={theme => ({
      [theme.breakpoints.only('xs')]: {
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        border: 0,
        borderRadius: 0,
        transform: 'initial',
      }
    })}>
    </ModalDialog>
</Modal>

I am changing this issue to a question instead.