如何在MUI v1 Beta主题中修改响应式断点值？

首先，针对你遇到的"Uncaught TypeError: Object(...) is not a function"错误，大概率是因为MUI v1 Beta中createBreakpoints的使用方式和后续版本不同，或者你导入的路径有误。在v1 Beta里，我们不需要单独调用这个函数，而是直接在自定义主题中覆盖断点配置即可。

下面是完整的实现步骤，帮你把MUI的断点替换成Bootstrap v4的数值：

1. 导入必要的模块 #

首先确保你从正确的路径导入创建主题的工具：

import { createMuiTheme } from '@material-ui/core/styles';

2. 定义Bootstrap v4的断点值 #

Bootstrap v4的断点标准是：

• xs: 0px（超小屏幕）
• sm: 576px（小屏幕）
• md: 768px（中等屏幕）
• lg: 992px（大屏幕）
• xl: 1200px（超大屏幕）

我们把这些值转换成MUI需要的断点对象：

const bootstrapBreakpoints = {
  values: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  }
};

3. 创建自定义主题并覆盖断点 #

用createMuiTheme创建主题时，直接传入breakpoints配置：

const theme = createMuiTheme({
  breakpoints: bootstrapBreakpoints
});

4. 在应用中注入自定义主题 #

最后用MuiThemeProvider把主题注入到你的应用根组件：

import { MuiThemeProvider } from '@material-ui/core/styles';
import App from './App';

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <App />
  </MuiThemeProvider>,
  document.getElementById('root')
);

验证断点是否生效 #

你可以在组件中使用MUI的useMediaQuery钩子来测试断点是否正确：

import { useMediaQuery, useTheme } from '@material-ui/core/styles';

function MyComponent() {
  const theme = useTheme();
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
  
  return <div>{isSmUp ? '屏幕宽度≥576px' : '屏幕宽度<576px'}</div>;
}

这样就能确保MUI的断点和Bootstrap v4完全匹配，同时解决你之前遇到的函数调用错误。

内容的提问来源于stack exchange，提问作者Kyle Green