如何在React的Material UI中的网格项上设置多个断点? [英] How to set multiple breakpoints on grid item in Material UI in React?

问题描述

我有一个带有网格的布局HOC.在内部，我有4个带有网格项的Widget组件.我希望这些组件以以下方式显示:

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:

• 大屏幕:所有4合1行
• 中型屏幕:连续2列2列
• 小屏幕:1个小部件占据全宽，4行

所以我这样配置它:

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

但是，当我调整屏幕大小时，它会直接从4变为1.

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

我试图在index.js中重新配置主题:

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?

推荐答案

您拥有sm={2}，这意味着每一行都被分为6列(您的窗口小部件现在在sm屏幕上覆盖了4/6列)

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

在md => sm之间的过渡中，您的小部件的大小可能会变得更小，但是您没有注意到它，然后它跳回了1.

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

您需要具有sm={6}才能在每行中具有2个小部件，而不必自定义主题断点

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

这篇关于如何在React的Material UI中的网格项上设置多个断点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！