mui component props, set responsively

Question

I don't want to manipulate the basic style of material-ui but I want to change some value of some components props responsively by breakpoints.

For example:

How can I responsively set the <TextField/>'s size prop? I want to do it inline. I know other methods like: 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>
    );
}