How to set multiple breakpoints on grid item in Material UI in React?

问题

I have a Layout HOC with Grid. Inside I have 4 Widget components with Grid items. I want these components to be displayed in the following manner:

• large screens: all 4 in 1 row
• medium screens: 2 in a row, 2 columns
• small screens: 1 widget taking full width, 4 rows

So I configured it like this:

<Grid item xs={12} sm={2} md={3}>
  ...content
</Grid>

However, when I resize the screen it goes directly from 4 to 1.

I tried to reconfigure the theme in my index.js:

const theme = createMuiTheme({
  breakpoints: {
    values: {
    md: 1100
    }
  } ,
  typography: {
    useNextVariants: true
  }
});

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  </Provider>, document.getElementById('root')
);

What else can I do? How can I make it work?

回答1:

You have sm={2} that means each row is being split into 6 columns ( your widgets now cover 4/6 columns on sm screens)

Your widgets are probably becoming even smaller in size on the transition between md => sm but you didn't notice it, then it jumped back to 1

You'll need to have sm={6} in order to have 2 widgets per row, your don't have to customize the themes breakpoints

来源：https://stackoverflow.com/questions/54342520/how-to-set-multiple-breakpoints-on-grid-item-in-material-ui-in-react