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")，后踩breakpoints.only，胜过“ xs”设置）

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

xs，超小：0像素或更大

sm，小：600像素或更大

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

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

2 个答案: