我正在开发一个Web应用程序，我想使用CSS网格布局。几个小时之后，我发现我的大多数布局都是不正确的，因为style被较低的组件覆盖，失去了gridArea。我很幸运它到目前为止工作。
因为我认为放置物品是容器的责任，所以物品应该与上层组件决定分配它们的任何gridArea无关。此外，我有工厂的组件，所以我有时只是不知道哪个项目将在那里。我现在正在我的所有组件中做这个样板：
<div style={{ ...props.style, ...styles.ThisComponent }}>
my item content...
</div>
这样做的正确方法是什么？任何陷阱？
我现在正在重写我的所有组件，请为我付出很多努力！
CSS网格仅受最新浏览器的支持。你不喜欢使用材料-ui的网格布局吗？然后你可以调整一切。这是一个link如果你这样做，那里还有一个CSS Grid布局exanplation。
在上面写的所有组件中对样式属性进行硬编码似乎是一种矫枉过正。此外，对于没有CSS-Grid支持的浏览器使用后备应该也是一个优先事项。
您是否尝试在styled-components中创建包装器然后将组件代码放入其中？如果所有外部divs应该具有相同的风格，可能会省去你的麻烦吗？语法可能会与您编写的内容略有不同，但似乎更易于维护*
*可能是自以为是