接下来在Material UI中向自定义主题添加断点(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",
},