Apply styles to children if media query matches


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

(max-width: 1200px) and (min-width: 800px) breakpoints
query="(max-width: 1200px) and (min-width: 800px)"
styles={{ fontSize: 20, '&:hover': { backgroundColor: 'silver' } }}
<Text>(max-width: 1200px) and (min-width: 800px) breakpoints</Text>

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

Configure breakpoints

Mantine uses Bootstrap's breakpoint values as defaults:

BreakpointViewport width

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

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

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>
Build fully functional accessible web applications faster than ever
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback