如何通过断点内联响应式设置Material-UI组件的Props（以TextField的size属性为例）

嘿，我明白你不想改动Material-UI基础样式，只想通过断点内联式地动态修改TextField的size属性——毕竟size是组件的Prop，不是CSS样式，没法直接用类似{[theme.breakpoint.down('md')]:'small'}的对象语法来实现，不过我们可以用Material-UI的useMediaQuery和useTheme钩子轻松搞定！

具体实现步骤： #

1. 从@mui/material导入useMediaQuery和useTheme钩子
2. 在组件内部获取当前主题实例，并通过useMediaQuery监听屏幕是否小于md断点
3. 根据媒体查询的结果，动态给TextField设置size属性

修改后的完整代码： #

import { Grid, IconButton, styled, TextField, useMediaQuery, useTheme } from "@mui/material";
import React from "react";
import SearchIcon from "@mui/icons-material/Search";

let TextFieldS = styled(TextField)({
  '& fieldset': {
    borderRadius: 35,
  },
})

export default function SearchBox() {
  const theme = useTheme();
  // 判断当前屏幕是否小于md断点（默认md对应900px）
  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));

  return (
    <Grid container spacing={1}>
      <Grid item xs="auto">
        <IconButton>
          <SearchIcon color="primary" fontSize="large" />
        </IconButton>
      </Grid>
      <Grid item xs>
        <TextFieldS
          label="جستجو در تمام محصولات"
          type="search"
          variant="outlined"
          fullWidth
          // 根据屏幕尺寸动态切换size属性
          size={isSmallScreen ? 'small' : 'medium'}
        />
      </Grid>
    </Grid>
  );
}

原理说明： #

• useTheme帮我们获取当前Material-UI的主题配置，包含预设的断点规则
• useMediaQuery会根据传入的断点条件，实时返回布尔值表示当前屏幕是否匹配该规则
• 我们直接用这个布尔值控制size的取值，完全是内联式的实现，不需要额外的styled或css方案，完美契合你的需求！

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