javascript - 如何在 reactjs 中始终将网格布局与组件一起使用

Question

我正在开发一个网络应用程序，我想使用 CSS 网格布局。几个小时后，我发现我的大部分布局都不正确，因为 style 被下层组件覆盖，丢失了 gridArea。我很幸运它到目前为止一直有效。

因为我相信放置项目是容器的责任，所以项目应该与上层组件决定分配它们的任何 gridArea 无关。此外，我有组件工厂，所以有时我只是不知道那里会有哪些项目。我现在正在我所有的组件中做这个样板:

<div style={{ ...props.style, ...styles.ThisComponent }}>
  my item content...
</div>

正确的做法是什么？有什么陷阱吗？

我现在正在重写我所有的组件，请节省我很多精力!

Answer 1

CSS 网格仅被最新的浏览器支持。您不喜欢使用 material-ui 中的网格布局吗？然后你可以调整一切。这是一个 link如果您这样做，那里还有一个 CSS 网格布局说明。