如何在MUI中使用CSS容器查询？实现父元素宽<300px时背景变红

要实现父元素宽度小于300px时，目标元素背景变为红色的效果，可通过MUI的styled工具结合CSS容器查询完成，具体代码如下：

import { styled } from '@mui/material/styles';

const Item = styled("div")(() => ({
  border: "solid 1px",
  padding: 100,
  // 容器查询：父容器宽度≤300px时应用样式
  ["@container (max-width: 300px)"]: {
    background: "red",
  },
}));

export default function BasicGrid() {
  return (
    <div>
      <Item>当父元素宽度小于300px时，我会变成红色</Item>
    </div>
  );
}

说明 #

• 借助CSS容器查询语法@container (max-width: 300px)监听父容器宽度变化
• 当父容器宽度满足条件时，自动为Item组件应用红色背景样式

内容的提问来源于stack exchange，提问作者vuvu