reactjs - 如何在 createTheme 中使用断点？ Material UI 和 React.js

Question

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

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 本身中使用它们？正确执行此操作的方法是什么，以便我可以传播包含所有响应式样式的样式？

Answer 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)