MediaQuery

Apply styles to children if media query matches
Import

Usage

MediaQuery component adds styles to child element if given media query matches:

(max-width: 1200px) and (min-width: 800px) breakpoints
import { MediaQuery, Text } from '@mantine/core';
function Demo() {
return (
<MediaQuery
query="(max-width: 1200px) and (min-width: 800px)"
styles={{ fontSize: 20, '&:hover': { backgroundColor: 'silver' } }}
>
<Text>(max-width: 1200px) and (min-width: 800px) breakpoints</Text>
</MediaQuery>
);
}

Usage with theme

(max-width: 1200px) and (min-width: 800px) breakpoints
import { MediaQuery, Text } from '@mantine/core';
function Demo() {
return (
<MediaQuery
query="(max-width: 1200px) and (min-width: 800px)"
styles={(theme) => ({
fontSize: theme.fontSizes.lg,
'&:hover': { backgroundColor: theme.fn.primaryColor(), color: theme.white },
})}
>
<Text>(max-width: 1200px) and (min-width: 800px) breakpoints</Text>
</MediaQuery>
);
}

largerThan and smallerThan props

largerThan and smallerThan props lets you use theme.breakpoints:

- larger than lg
- Smaller than lg
- Smaller than xl, larger than sm
- Smaller than 1500px, larger than 800px
import { useMantineTheme, MediaQuery, Stack, Box, CSSObject } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const highlight: CSSObject = {
backgroundColor:
theme.colorScheme === 'dark'
? theme.fn.rgba(theme.colors.blue[7], 0.25)
: theme.colors.blue[0],
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.blue[6] : theme.colors.blue[3]
}`,
};
const boxStyles = {
borderRadius: 3,
padding: '3px 5px',
border: '1px solid transparent',
};
return (
<Stack spacing={5}>
<MediaQuery largerThan="lg" styles={highlight}>
<Box sx={boxStyles}>- larger than lg</Box>
</MediaQuery>
<MediaQuery smallerThan="lg" styles={highlight}>
<Box sx={boxStyles}>- Smaller than lg</Box>
</MediaQuery>
<MediaQuery smallerThan="xl" largerThan="sm" styles={highlight}>
<Box sx={boxStyles}>- Smaller than xl, larger than sm</Box>
</MediaQuery>
<MediaQuery smallerThan={1500} largerThan={800} styles={highlight}>
<Box sx={boxStyles}>- Smaller than 1500px, larger than 800px</Box>
</MediaQuery>
</Stack>
);
}

Configure breakpoints

Default breakpoints:

BreakpointViewport width
xs576px
sm768px
md992px
lg1200px
xl1400px

To change these values wrap your application with MantineProvider and set breakpoints prop on theme:

import { MantineProvider } from '@mantine/core';
function YourApp() {
return (
<MantineProvider
theme={{
breakpoints: {
xs: 500,
sm: 800,
md: 1000,
lg: 1275,
xl: 1800,
},
}}
>
Hello World
</MantineProvider>
);
}

MediaQuery children

MediaQuery always work with single child and uses className prop to add styles, child component must accept it otherwise styles will not be applied the element:

// Will not work with MediaQuery – component does not handle className
const MyButton => ({ label }) => <button>{label}</button>
// Will work with MediaQuery – handle className
const MyButton => ({ label, className }) => <button className={className}>{label}</button>
// Will work with MediaQuery – handle className
const MyButton => ({ label, ...others }) => <button {...others}>{label}</button>

!important MediaQuery will work only with React elements. Strings, numbers, fragments and other parts will not have correct styles:

// Invalid MediaQuery usage, do not do this
import { MediaQuery } from '@mantine/core';
function InvalidDemo() {
return <MediaQuery>No styles applied</MediaQuery>;
}
Download more icon variants from https://tabler-icons.io/i/search

MediaQuery component props

NameTypeDescription
children *
ReactNode
Child that should be shown at given breakpoint, it must accept className prop
largerThan
number | "xs" | "sm" | "md" | "lg" | "xl"
Styles applied to child when viewport is larger than given breakpoint
query
string
Any other media query
smallerThan
number | "xs" | "sm" | "md" | "lg" | "xl"
Styles applied to child when viewport is smaller than given breakpoint