Material UI 堆栈第一个子组件缩进不正确？

Question

不确定这是否是我可以解决的 CSS 问题，但我正在尝试使用 Material UI 中的 <Stack /> 来构建垂直列表带有标签的复选框。

我在这里的沙盒中尝试了以下操作（参见 demo.tsx）：https://codesandbox.io/embed/basicstack-material-demo-forked-q8kb4q?fontsize=14&hidenavigation=1&theme=dark

代码在这里

export default function BasicStack() {
  return (
    <Box sx={{ width: "100%" }}>
      <Stack spacing={2}>
        <FormControlLabel control={<Checkbox />} label="Test1" />
        <FormControlLabel control={<Checkbox />} label="Test2" />
        <FormControlLabel control={<Checkbox />} label="Test3" />
      </Stack>
    </Box>
  );
}

正如您在演示中看到的那样，只有第一个子组件没有正确排列，因此临时解决方案是仅向第一个 <FormControlLabel /> 添加一个 sx={{marginLeft: 0.1}} 我认为是这是一个很好的练习。有谁知道为什么会发生这种错位？如果有更优雅的修复方法？

Answer 1

我觉得问题出在spacing=2上，你可以试试把它去掉，然后缩进就改正了。

<Stack>
  <FormControlLabel control={<Checkbox />} label="Test1" />
  <FormControlLabel control={<Checkbox />} label="Test2" />
  <FormControlLabel control={<Checkbox />} label="Test3" />
</Stack>

Material UI 堆栈第一个子组件缩进不正确？

Material UI Stack first child component isn't indented correctly?

css

reactjs

material-ui