Does Material UI already support CSS Container Queries?

Question

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

Container queries for CSS are quite recent. Is MUI 5.0 already capable of using them? Unfortunately, the SxProps do not have them. Is it possible to apply it in the MUI world without adding further CSS classes?

Unfortunately, I couldn't find anything in their documentation or anywhere else.

If MUI does not currently provide that feature, is there perhaps another way to use them in React without adding extra CSS classes. React doesn't support them as well with its CSSProperties.

Answer 1

I just had luck with them! Like with some nested-ish properties, typescript support falls over a little, but nothing stopped me from trying 🙃 However, I would couple this with the polyfill since at the time of writing, there was only a 76% usage on Can I Use.

I found my inspiration from a css tricks article: A New Container Query Polyfill That Just Works. I used their method of adding the polyfill in a script tag on my index.html so it would only load if needed and wouldn't affect supporting browsers needlessly

Here's an example of how the css worked for me:

const Container = styled("div")(() => ({
  containerType: "size",
}))

const Card = styled("div")<{ borderColor: string }>(
  ({ theme, borderColor }) => ({
    backgroundColor: theme.palette.background.paper,
    "@container (min-width: 700px)": {
      backgroundColor: "red",
    },
  })
)

const Example: React.FC = () => {
return (
  <Container>
    <Card />
  </Container>
 )
}