如何在 createMuiTheme 中使用断点？材质 UI 和 React.js答案

【问题标题】：How can I use breakpoints inside createMuiTheme? Material UI & React.js如何在 createMuiTheme 中使用断点？材质 UI 和 React.js
【发布时间】：2019-04-25 18:43:12
【问题描述】：

也许不是正确的方法，但我想为标题创建一些“全局”样式。像这样的：

const myTheme = createMuiTheme({
    headings: {
        h1: {
            fontSize: 28,
            // Obviously this does not work...
            [theme.breakpoints.down('sm')]: {
                fontSize: 24
            },
        },
        h2: {
            fontSize: 24,
        }
    }
}

然后我可以像这样在我的组件中使用它们：

const styles = (theme) => ({
    myElement: {
        ...theme.headings.h1,
        // ... other styles
    }
}

这确实有效，但我面临的问题是我希望标题具有响应性并尊重 Material UI 的断点，但我不能在 createMuiTheme 本身中使用它们？有什么方法可以正确地做到这一点，这样我就可以在我的样式中传播，包括响应式样式全部合二为一？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你可以使用createBreakpoints方法

例子：

// theme.js

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

const breakpoints = createBreakpoints({})

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

export default theme

（已测试：material-ui 4.0.1）

【讨论】：

是的，我决定创建另一个虚拟空白主题，然后在我的主题中使用该主题。同一类型的东西。
createBreakpoints 被认为是私有的 material-ui.com/guides/minimizing-bundle-size/#option-1 “请注意，我们只支持一级和二级导入。任何更深层次的内容都被认为是私有的，并且可能导致问题，例如你的包中的模块重复。”
嗨 @EricBurel 我认为它仍然存在.. 在 git 中检查，material-ui/packages/mui-system/src/createTheme/createBreakpoints.js，但现在，在 v5 中，位于不同的文件夹中.. 和新版本一样，我不知道这是否是最好的解决方案。我还没有使用新版本
完美，非常感谢@RicardoCanelas，查看我的更新答案：stackoverflow.com/a/69175058/5513532
然而，创建一个中间主题似乎是首选的解决方案。

【解决方案2】：

来自https://github.com/mui-org/material-ui/issues/18017#issuecomment-545914925

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

const theme = createMuiTheme();

theme.overrides = {
  MuiTypography: {
    hero: {
      [theme.breakpoints.up('md')]:{
        fontSize: '11rem',
        background: 'red',
      },
      fontSize: '3.75rem',
      lineHeight: '5rem',
      fontWeight: 700,
    },
  },
};

【讨论】：

【解决方案3】：

V5 更新

首选的解决方案是创建一个中间主题 (source)：

let theme = createTheme()
theme = createTheme(theme , { 
  h5: {
          fontSize: "1.5", //24px
          fontWeight: title.fontWeight,
          fontFamily: sansSerif(title.fontFamily),
          letterSpacing: title.letterSpacing,
          lineHeight: "2.1rem", //34px
          color: "#636e72",
          [theme.breakpoints.between("xs", "sm")]: {
            fontSize: "1.25rem", // 20px
            lineHeight: "1.9rem", //  30px
          },
          [theme.breakpoints.between("sm", "md")]: {
            fontSize: "1.4rem", //24px
            lineHeight: "2rem", // 35px
          },
        },
})

如果您使用createBreakpoints：正如@Ricardo Canelas 评论所指出的，createBreakpoints 已经简单地移动了，正确的导入现在是：import createBreakpoints from "@mui/system/createTheme/createBreakpoints"。但是，请记住，在撰写本文时这仍然是一个私有 API，因此可以在任何版本更新时移动/中断。首选的解决方案是使用中间主题。

【讨论】：

【解决方案4】：

这是附注，但如果您想更改断点的值，您可以编辑使用createBreakpoints({}) 创建的breakpoints 对象：

import createBreakpoints from '@material-ui/core/styles/createBreakpoints'

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

breakpoints.values.lg = 1024
// outputs {xs: 0, sm: 600, md: 960, lg: 1024, xl: 1920}

如果您不想编辑现有项目，也可以通过类似方式添加额外的断点：

breakpoints.values['xxl'] = 3000
// outputs {xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920, xxl: 3000}

在我的项目中，Material-UI 设置的断点（xs: 0, sm: 600 等）与我在项目中已经使用的断点不一致，所以我不得不更改它们。

【讨论】：

? 很好的解释...这就是我导入 createBreakpoints 方法的原因。

【解决方案5】：

const theme = createMuiTheme();

theme.typography.h3 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

https://material-ui.com/customization/typography/#responsive-font-sizes

【讨论】：