基于元素大小的 Material UI 响应式

Question

我正在使用 React 和 MaterialUI 来构建一个系统，该系统将在另一个（不是基于 React 的）网站中显示小部件。我想让小部件具有响应性，但它​​们需要响应自己的容器宽度而不是窗口宽度，因为我不知道小部件将占用多少页面。

我考虑过的选项：

• 按时间间隔轮询容器大小
• 在窗口调整大小事件上轮询容器大小
• 在启动时根据容器和窗口大小设置主题断点

这些对我来说似乎都是相当丑陋的解决方案。有没有一种优雅的方式来做我想做的事？

Answer 1

为了使各种@material-ui/core元素只占用与放置它们的容器一样多的空间，我将使用该Grid组件。

我使用过以下内容：

<Grid container spacing={24}>
  <Grid item>
    Your content here
  </Grid>
</Grid>

如果您进一步希望网格项能够响应屏幕尺寸等内容，您可以这样做：

const grid = {
    xs: 24,
    sm: 24,
    md: 24,
    lg: 12,
    xl: 12,
};

和

<Grid item {...grid}>

文档： https: //material-ui.com/layout/grid/