将此代码写入包含组件的文件。
1.Import:

import { ThemeProvider } from "@mui/styles";

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

<ThemeProvider theme={theme}>
  <your component/>
</ThemeProvider>

例如：

mobileMenuStyle: {
    display: "none",
    "& .MuiList-root": {
        marginTop: 40,
    }
},
"@media (max-width: 1440px)": {
    mobileMenuStyle: {
      display: "block"
     }
}

取代：

mobileMenuStyle: {
    display: "none",

    "& .MuiList-root": {
        marginTop: 40,
    },
    [theme.breakpoints.down("laptop")]: {
        display: "block",
    },
},

用主题提供程序封装datatable组件

import { ThemeProvider } from "@mui/styles";
import { createTheme, responsiveFontSizes } from '@mui/material/styles';

然后

let theme = createTheme();
theme = responsiveFontSizes(theme);

然后

<ThemeProvider theme={theme}>
 < name of your data table compobebt >
</ThemeProvider>

请注意，如果您直接导入/使用组件，并且该组件试图访问主题中的数据，您将获得此错误（或类似错误，取决于您试图访问主题中的属性）。
ThemeProvider中的“theme”数据 * 不 * 传递给导入的组件（或直接在JSX中使用的组件），它只传递给组件或元素的 * 样式化 *（通过例如样式化组件或情感）。
换句话说，<MyComponent />将 * 不 * 从主题接收任何数据，但styled(MyComponent)``; * 将 * 接收主题数据。
这让我犹豫了一段时间，所以我希望它能帮助其他偶然发现它的人。

1. import {makeStyles} from '@mui/styles';
2. import {Theme} from '@material-ui/core';

declare module '@material-ui/core' {
    interface DefaultTheme extends Theme{}
}

const useStyles = makeStyles( (theme : any) => ({

    yourcomponent : {
        [theme.breakpoints.down('sm')] : {
         ///put your styles here 
        },

}));