Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element.
<Box
style={{
marginTop: "3rem",
marginLeft: "1rem",
display: "flex",
justifyContent: "center",
spacing: 1,
}}
>
<Button onClick={handleSave} variant="contained" color="primary">
SAVE
</Button>
<Button
onClick={toDetailsView}
startIcon={<CancelIcon />}
variant="contained"
color="primary"
>
CANCEL
</Button>
</Box>
Despite including the property "spacing: 1", the buttons are displaying as if they are directly adjacent to each other, making it difficult to differentiate between them...
https://i.sstatic.net/znsmq.png
How can I apply styling that introduces some space between these buttons?