mui component props, set responsively - reactjs

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>
);
}