mui组件道具，响应式设置

Question

我不想操纵 material-ui 的基本样式，但我想通过断点响应地更改某些组件道具的某些值。

例如：

如何响应式设置 <TextField/> 的尺寸属性？我想在线进行。我知道其他方法，例如：styled(), css,...

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

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

export default function SearchBox() {
    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={{[theme.breakpoint.down('md')]:'small'}}
                />
            </Grid>
        </Grid>
    );
}

Answer 1

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


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

export default function SearchBox() {
   const theme = useTheme();
   const mdOnly = useMediaQuery(theme.breakpoint.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={mdOnly ? 'medium': 'small'}
                />
            </Grid>
        </Grid>
    );
}

mui组件道具，响应式设置

mui component props, set responsively

reactjs

material-ui

styled-components