Is it possible to use MUI breakpoints with material-table?

Is it possible to use MUI breakpoints with material-table? I want to change the styling of the search field in my material-table when above/below sm & md breakpoints.

This is my current styling for the search field. How can I add breakpoints to it?

// My global Breakpoints in App.js
const customTheme = createTheme({
    breakpoints: {
        values: {
            xs: 501,
            sm: 767,
            md: 1024,
            lg: 1365,
            xl: 1583,
        },
    },
});

// Material-Table search field and styling in table.js
//  I want to use this styling for search field
const useStyles = makeStyles((theme) => ({
    sField: {
        border: "1px solid #7E7E7E",
        borderRadius: "2px",
        [theme.breakpoints.up("md")]: {
            paddingLeft: "20px",
            width: "300px",
            height: "40px",
        },
        [theme.breakpoints.down("sm")]: {
            paddingLeft: "10px",
            width: "200px",
            height: "20px",
        },
    },
}));
//  This styling is for search field
searchFieldStyle: {
    border: "1px solid #7E7E7E",
    borderRadius: "2px",
    paddingLeft: "20px",
    width: "300px",
    height: "40px",
    marginRight: "50px",
},