Here is the HTML code in question:
<div className="button-container">
<Button variant="contained">
Default
</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
</div>
I attempted to add margin to all direct children of button-container using CSS, but it didn't work as expected.
.button-container > *{
margin: 8px;
}
However, when I specifically targeted the Button components inside the button-container, it worked as intended.
.button-container > Button{
margin: 8px;
}
I'm now wondering if this issue is related to my syntax or if it could be a compatibility problem with JSX/React.