Basics Container queries is the same as media queries, but not based on the view port, but any element This is the game changer for the responsive design Example from my task Here text is disappearing when container becomes less than 130px.
export const LogoComponent = ({ text }) => (
<Box
sx={{
display: 'flex',
gap: '10px',
flexGrow: 1,
flexShrink: 0,
containerType: 'inline-size',
containerName: 'logo',
'@container logo (max-width: 130px)': {
'& span': {
display: 'none'
}
}
}}
>
<img src={HeerosLogo} height='38' alt='Heeros logo' />
<span>{text}</span>
</Box>
)