使用mui5x prop分隔内联子元素的首选语法是什么?

Question

我想建立一个MUI容器与几个子组件内联呈现，但由固定填充分隔。我可以这样做:

<Box sx={{display: 'flex', '& > * + *': {ml: 2}}> 
<div>Thing 1</div>
<div>Thing 2</div>
</Box>

好的，但是有点乱。使用固定间距(即，不在网格中)来布局组件时，首选的MUI/CSS技术是什么?

Answer 1

有很多方法可以做到这一点，但在我看来最干净的是使用flex和网格间隙(特别是因为我的大多数布局已经使用flex来水平/垂直对齐)。

<Box sx={{display: 'flex', gap: 2}}> 
<div>Thing 1</div>
<div>Thing 2</div>
</Box>

或带方框，甚至:

<Box display="flex" gap={2}> 
<div>Thing 1</div>
<div>Thing 2</div>
</Box>

有关此属性的详细信息，请参阅mozilla文档:https://developer.mozilla.org/en-US/docs/Web/CSS/gap