MediaQuery

Apply styles to children if media query matches
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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>;
}
Go back
Group – @mantine/core
Up next
SimpleGrid – @mantine/core

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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter