在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月）：

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

Answer 2

如果您不想更改默认值，
您可以使用一种快速的解决方法， 使用主题断点字段在需要的地方更改断点值。

例如：

xxl断点

 [theme.breakpoints.up(theme.breakpoints.values.xl + CUSTOM_BREAKPOINT_DIFFERENCE)]: {
  padding: "0 3.5rem",
},