Question

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

然后，我的大量组件都包含一个自定义样式表，这些样式表均引用该自定义主题，例如：

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的{{1}}组件样式。

关于自定义主题，我希望能够为每个不同的断点定义不同的Spacing值。默认情况下，Material-ui包含以下断点：

padding

例如，在24px以下的屏幕上，我希望将Spacing设置为6，这样就不必使用媒体查询在每个组件上自定义xs: 0 sm: 600 md: 960 lg: 1280 xl: 1920，而将{{ 1}}组件将在此特定屏幕尺寸下将其md属性设置为spacing。

Material-ui是否可以为每个断点定义不同的queryContainer值？我在Material-ui文档中没有看到任何此类示例。谢谢！

Answer 1

您可以按照docs中所述，将函数传递给createTheme间隔字段：

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

现在，如果您致电：

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

将在makeStyles / createStyles内的每次访问中评估间距值，并针对不同的屏幕尺寸返回不同的值。您应该扩展setSpacing函数以适合您的需求，但是因数（8,6）与上面提到的interval（3）相对应，对于不同的屏幕尺寸，它应该返回24/18。希望这可以帮助。编码愉快。

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

1 个答案: