在 createMuiTheme 中覆盖主题变量时如何设置断点

Question

我正在尝试设置默认主题排版字体大小以根据断点进行更改。例如，当断点位于 {xs} 值时，将 theme.typography.h4.fontSize 更改为 '1.5rem'。在所有其他断点处，将其保留为默认值 ('2.125rem')。

我可以使用以下代码示例在组件中轻松完成此操作：

const useStyles = makeStyles(theme => ({
    title: {
        [theme.breakpoints.down('xs')]: {
            fontSize: '1.5rem',
        }
    },
}))

但是，这意味着必须向其中包含的每个组件添加相同的代码<Typography variant='h4'>。如果我决定将值从 '1.5rem' 更改为 '1.25rem'，我将需要找到每个实例<Typography variant='h4'>并手动更改它。

有没有办法给 createMuiTheme 添加断点，使其适用于所有实例？

我尝试了以下方法，但不起作用：

const defaultTheme = createMuiTheme()

const theme = createMuiTheme({
    typography: {
        h4: {
            [defaultTheme.breakpoints.down('xs')]: {
                fontSize: '1.5rem'
            }
        }
    }
})

Answer 1

您可以通过createBreakpoints使用自定义断点使用自定义断点。

这是更改 MuiButton 的示例

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

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

const breakpoints = createBreakpoints({ ...customBreakpointValues })

const theme = createMuiTheme({
  breakpoints: {
    ...customBreakpointValues,
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          padding: '10px',
          [breakpoints.up('lg')]: {
            padding: '20px',
          },
        },
      },
    },
  },
})

Answer 2

更正：最初我指出您的解决方案不起作用，因为您使用的是不可能的条件，但我是不正确的。xs 的“向下”包含 xs，因此它可以满足您的需求（匹配 0px 到 600px）。

我不确定我在最初的测试中做了什么导致我误入歧途的事情，但可能导致混淆的一件事是，如果您有多个down阈值。在我自己的测试，我有一个更简单的时间，避免在拍摄自己的脚（例如，由具有breakpoints.down("xs")后跟一个后来breakpoints.down("sm")那莫须有的“XS”设置）使用breakpoints.only。

来自https://material-ui.com/layout/breakpoints/#breakpoints

• xs，超小：0px 或更大
• sm，小：600px 或更大

这是一个更新的沙箱，它更清楚地显示了正在发生的事情：