材料版本 5 中是否删除了 createBreakpoints 方法？答案

【问题标题】：Was the createBreakpoints method removed in Material version 5?材料版本 5 中是否删除了 createBreakpoints 方法？
【发布时间】：2023-03-17 18:18:01
【问题描述】：

我尝试使用 createBreakpoints 方法：

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'
import { createTheme } from '@material-ui/core'

const breakpoints = createBreakpoints({})

const theme = createTheme({
  overrides: {
    MuiTab: {
      root: {
        [breakpoints.up('md')]: {
          minWidth: '200px',
          backgroundColor: 'yellow',
        },
      },
    },
  },
})

export default theme

它显示一个错误： Module not found: Can't resolve '@material-ui/core/styles/createBreakpoints'

我想在 createTheme 方法中创建断点规则。我该怎么做？

问题在于版本 5。

谢谢。

【问题讨论】：

标签： material-ui

【解决方案1】：

如前所述，here 和 here createBreakpoints 是私有模块，您必须使用 createTheme 和 styleOverrides：

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

const theme = createTheme();

theme.components.MuiTab = {
  styleOverrides: {
    root: {
      [theme.breakpoints.up('md')]: {
        minWidth: '200px',
        backgroundColor: 'yellow',
      },
    },
  },
};

示例：

【讨论】：

【解决方案2】：

这是一种私有方法，不再推荐使用 mui V5 (material-ui) 进行样式设置。但是，如果您正在迁移，可以使用它，可以在@mui/system 下找到。

import { createTheme, adaptV4Theme} from "@mui/material/styles";
import createBreakpoints from "@mui/system/createTheme/createBreakpoints";

const breakpoints = createBreakpoints({
  xs: 0,
  sm: 600,
  md: 960,
  lg: 1280,
  xl: 1920,
});

注意：断点在 V5 中有所改变。迁移解决方法是直接设置它们。

const theme createTheme(adaptV4Theme({
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1920,
      },
    },
    ... v4 theme goes here,
})

【讨论】：