Material UI如何实现响应式组件 解决窄屏搜索框渲染问题

你的代码存在几个布局逻辑冲突，直接导致宽度小于423px时输入框被挤压无法正常渲染：

• 硬编码的固定边距占宽过高：外层Box设置了固定m={5}、pt={5}，内层容器又加了固定marginLeft={8}，小屏总宽度本身有限，固定边距直接吃掉了绝大多数可用空间
• Grid组件用法错误：单独使用Grid item但没有外层包裹Grid container，你写的spacing、columns等响应式配置完全不会生效
• 存在无效样式：SearchIcon上的coSelf: "center"是笔误，正确属性为alignSelf，原写法不会生效
• Flex布局未做小屏适配：外层容器没有配置换行规则，小屏下搜索区和右侧设置按钮会强制在同一行挤压空间
• 无效属性传递：直接在TextField上写textAlign="center"不会生效，该属性不属于TextField的公开API，需要透传到内部Input组件上

<Box
  sx={{ flexGrow: 1 }}
  // 固定边距改为响应式值，小屏缩小边距
  m={{ xs: 1, sm: 5 }}
  pt={{ xs: 2, sm: 5 }}
  display="flex"
  justifyContent="flex-end"
  alignItems="center"
  // 小屏允许内容换行，避免元素挤压
  flexWrap={{ xs: "wrap", md: "nowrap" }}
  gap={1}
>
  {/* 移除无效的孤立Grid item，直接用Box做flex容器降低复杂度 */}
  <Box
    sx={{ flexGrow: 1 }}
    display="flex"
    justifyContent="center"
    alignItems="center"
    // 边距改为响应式值
    mx={{ xs: 1, sm: 8 }}
    mt={{ xs: 2, sm: 4 }}
    width='100%'
  >
    <SearchIcon sx={{ alignSelf: "center", mx: 0.5 }} />
    <TextField
      id="standard-search"
      label="Search for a company..."
      type="search"
      variant="standard"
      fullWidth
      // textAlign透传到内部输入组件
      InputProps={{
        sx: { textAlign: "center" }
      }}
    />
  </Box>
  <Button 
    onClick={() => setLight((prev) => !prev)} 
    variant="contained" 
    color="primary" 
    sx={{ height: 40, flexShrink: 0 }} // 禁止按钮被压缩
  >
    <SettingsIcon/>
  </Button>
</Box>

• 所有固定数值的边距都替换为响应式断点配置，xs（小屏）下使用小边距，中大屏保留原设计的边距大小
• 移除了用法错误的孤立Grid组件，如果你确实需要使用Grid的栅格能力，必须给父级Grid加上container属性，否则item下的栅格相关配置全部无效
• 修正了样式笔误，统一使用sx属性编写样式，避免inline style和sx混写带来的样式优先级问题
• 给外层flex容器增加响应式换行规则，宽度不足时按钮会自动换到下一行，不会和搜索框抢宽度
• 给右侧按钮增加flexShrink: 0配置，避免按钮被压缩变形
• 修正了textAlign属性的写法，确保输入框文字居中的效果能正常生效

• 宽屏正常渲染效果：
  
• 小屏异常渲染效果：
  

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