我可以为自定义 Material-ui 主题定义断点特定间距吗？

Question

我正在努力使我的 Material-ui + React 仪表板响应式设计以更好地显示在不同的屏幕尺寸上，我的自定义主题包括 spacing 设置 8：

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

// https://material-ui.com/customization/themes/
export default createMuiTheme({
  spacing: 8
});

然后我的大量组件都包含自定义样式表，它们都引用了自定义主题，例如：

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

export default makeStyles(theme => ({
  queryContainer: {
    padding: theme.spacing(3),
    backgroundColor: theme.palette.common.white,
    color: theme.palette.common.white,
    borderBottom: theme.border.default
  }
}));

然后将 queryContainer 组件的 padding 属性设置为 24px。

在自定义主题上我希望能够为每个不同的断点定义不同的间距值。 默认情况下 Material-ui 包括以下断点：

xs: 0
sm: 600
md: 960
lg: 1280
xl: 1920

例如，在属于 md 的屏幕上，我希望将间距设置为 6，这样我就不必使用媒体查询在每个组件上自定义 spacing，并且queryContainer 组件将在该特定屏幕尺寸下将其 padding 属性设置为 18px。

Material-ui有没有办法为每个断点定义不同的spacing值？我在 Material-ui 文档中没有看到这方面的任何示例。谢谢！

Answer 1

您可以将函数传递给 createTheme 间距字段，如 docs 中所述：

function setSpacing(factor) {
    const width = window.innerWidth;
    if (width > 600) {
          return 8 * factor;
    } else {
          return 6 * factor;
    }
}

现在如果你打电话：

const theme = createMuiTheme({
    spacing: setSpacing
});

间距值将在 makeStyles/createStyles 和 return 内的每次访问中进行评估，对于不同的屏幕尺寸是不同的值。您应该扩展 setSpacing 函数以满足您的需要，但是因子 (8,6) 对应于您上面提到的间距 (3) 应该 return 24/18 对于不同的屏幕尺寸。希望这可以帮助。编码愉快。

我可以为自定义 Material-ui 主题定义断点特定间距吗？

Can I define breakpoint specific spacing to a custom Material-ui theme?

javascript

breakpoints

reactjs

material-ui