React material-ui grid：是否可以添加断点？

Question

因为我将断点值更改为主题：

breakpoints: {
      values: {
        xs: 0,
        sm: 568,
        md: 760,
        lg: 960,
        xl: 1200,
      }, 

我想添加一个xxl:1400断点以便像这样使用：

<Grid item xxl="4" md="6" xs="12"> 

有可能吗？

Answer 1

不完全支持此功能，但部分支持它，您可以创建一个自定义Grid组件以完全支持它。如果添加其他断点键，则Material-UI会generate the appropriate CSS classes用于所有它们，但不会查找xxl道具，因此不会自动应用适当的类（here是检查标准断点道具的地方。）

下面是一个带有GridWithXXL组件的工作示例，该组件负责应用适当的xxl CSS类。

import React from "react";
import ReactDOM from "react-dom";

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";

const theme = createMuiTheme({
  breakpoints: {
    keys: ["xs", "sm", "md", "lg", "xl", "xxl"],
    values: { xs: 0, sm: 568, md: 760, lg: 960, xl: 1200, xxl: 1400 }
  }
});
const GridWithXXL = ({ xxl, ...other }) => {
  const xxlClass = `MuiGrid-grid-xxl-${xxl}`;
  return <Grid className={xxlClass} {...other} />;
};
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <Grid container>
        {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(item => {
          return (
            <GridWithXXL
              key={item}
              item
              xs={12}
              sm={6}
              md={4}
              lg={3}
              xl={2}
              xxl={1}
            >
              Item {item}
            </GridWithXXL>
          );
        })}
      </Grid>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);