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
import { MediaQuery, Text } from '@mantine/core';
function Demo() {
return (
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: CSSObject = {
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>

!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>;