如何在material-table中结合MUI断点实现搜索框响应式样式？

完全可以实现，你的自定义断点配置是有效的，下面提供两种可行的实现方式：

方式一：通过makeStyles定义带断点的类样式并自定义搜索组件 #

material-table支持通过components属性自定义搜索框，我们可以把带断点的样式类应用到自定义的输入组件上：

import { TextField } from '@mui/material';
import MaterialTable from 'material-table';
import { makeStyles } from '@mui/styles'; // MUI v5需单独安装此包

const useStyles = makeStyles((theme) => ({
    searchField: {
        border: "1px solid #7E7E7E",
        borderRadius: "2px",
        // 大屏（md及以上）样式
        [theme.breakpoints.up("md")]: {
            paddingLeft: "20px",
            width: "300px",
            height: "40px",
            marginRight: "50px"
        },
        // 小屏（sm及以下）样式
        [theme.breakpoints.down("sm")]: {
            paddingLeft: "10px",
            width: "200px",
            height: "20px",
            marginRight: "20px"
        },
    },
}));

export default function CustomTable() {
    const classes = useStyles();

    return (
        <MaterialTable
            // 表格基础配置（列定义、数据等）
            columns={[/* 你的列配置 */]}
            data={[/* 你的数据 */]}
            // 自定义搜索框组件
            components={{
                Search: (props) => (
                    <TextField
                        {...props}
                        className={classes.searchField}
                        variant="standard"
                    />
                )
            }}
        />
    );
}

方式二：直接在searchFieldStyle中嵌入断点媒体查询 #

如果不想自定义组件，也可以直接利用MUI的断点生成媒体查询字符串，把响应式样式写在searchFieldStyle对象里：

import MaterialTable from 'material-table';
import { useTheme } from '@mui/material/styles';

export default function ResponsiveTable() {
    const theme = useTheme();

    // 带断点的搜索框样式
    const searchFieldStyle = {
        border: "1px solid #7E7E7E",
        borderRadius: "2px",
        [theme.breakpoints.up("md")]: {
            paddingLeft: "20px",
            width: "300px",
            height: "40px",
            marginRight: "50px"
        },
        [theme.breakpoints.down("sm")]: {
            paddingLeft: "10px",
            width: "200px",
            height: "20px"
        }
    };

    return (
        <MaterialTable
            // 表格基础配置
            columns={[/* 你的列配置 */]}
            data={[/* 你的数据 */]}
            // 应用响应式样式
            searchFieldStyle={searchFieldStyle}
        />
    );
}

关键注意点 #

• 必须确保你的表格组件被ThemeProvider包裹，并且传入了你在App.js中定义的customTheme，否则会使用MUI默认断点值，而非你自定义的xs/sm/md等值
• 若使用MUI v5，makeStyles需要单独安装@mui/styles依赖包；如果是v4则无需额外安装

内容的提问来源于stack exchange，提问作者Ciaran Crowley