Mui:Breakpoints

lastmod 2022-11-15created 2022-11-152 edits

Default breakpoints

Each breakpoint (a key) matches with a fixed screen width (a value):

• xs - extra-small: 0px
• sm - small: 600px
• md - medium: 900px
• lg - large: 1200px
• xl - extra-large: 1536px

Hiding output at specific breakpoints

• reactjs - Material-UI Grid does not hide when using display - Stack Overflow
• reactjs - How to hide/show elements at certain breakpoints with Material UI? - Stack Overflow

<Box sx={{ display: { xs: 'block', md:'none' } }}>
   {children}
</Box>

See also

• mui
• react

Favorite site

• Breakpoints - Material UI