Is there a CSS issue that needs fixing? I am working on creating a vertical list of checkboxes with labels using the <Stack /> component from Material UI.
I have tried implementing this in the sandbox provided (check out demo.tsx): https://codesandbox.io/embed/basicstack-material-demo-forked-q8kb4q?fontsize=14&hidenavigation=1&theme=dark
The code snippet is as follows:
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>
);
}
In the demo, you will notice that only the first child component is not aligned properly. A quick fix would be to add sx={{marginLeft: 0.1}} only to the first <FormControlLabel />. However, this might not be the most elegant solution. Can anyone shed light on why this misalignment occurs and suggest a better approach to fix it?