在 Material UI Next (reactjs) 中为自定义主题添加断点

Question

我正在使用 mui 创建一个自定义主题，如下所示：

export default createMuiTheme({
  breakpoints: {
    keys: [
      "xxs",
      "xs",
      "sm",
      "md",
      "lg",
      "xl",
    ],
    values: {
      xxs: 0,
      xs: 414, // iPhone X and below in portrait mode
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

但是当我尝试在类声明中使用它时：

const styles = theme => ({
  root: {
    [theme.breakpoints.down('xxs')]: {
      textAlign: "center",
      padding: theme.spacing.unit * 2,
    },
  },
})

我得到以下 CSS：

@media (max-width:NaNpx) {
  .root-3 {
    padding: 16px;
    text-align: center;
  }
}

与仅修改现有断点相比，是否有一种特殊的方法可以添加自定义断点？

Answer 1

目前只能自定义预定义断点的值。下面是一个例子：

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 450,
      md: 600,
      lg: 900,
      xl: 1200
    }
  }
});

不能配置断点名称。createBreakpoints.js 中有一条注释 解释了这一点：

// Sorted ASC by size. That's important.
// It can't be configured as it's used statically for propTypes.
export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];

更新（2018 年 9 月）：

此功能已被请求，目前正在讨论中。见材料-ui/issues/11649