Witam postanowiłem użyć w projekcie reactowym styled components i chciałbym zamienić na styled components taki oto layout
<div className="Row">
<button className="Button">Add</button>
</div>
<button className="Button">Cancel</button>
a w css to wygląda przykładowo tak:
.Row {
display: flex;
align-items: center;
justify-content: center;
}
.Row > button {
margin-left: 4px;
margin-right: 8px;
}
No więc używając styled komponent natrafiłem na pewien problem gdyż chciałbym ostylować każdy button w komponencie Row natomiast nie button który jest poza nim. Znalazłem jedynie przykład z dodaniem className do buttona w komponencie Row natomiast czy jest inny sposób? Oto kod który teraz napisałem:
const Button = styled.button`
// All Button's
`;
const Row = styled.div`
display: flex;
align-items: center;
justify-contnet: center;
// Only Row > Button (not working)
& {Button} {
margin-left: 4px;
margin-right: 8px;
}
`;
return (
<div>
<Row>
<Button>
Add
</Button>
</Row>
</div>
<Button>Test</Button>
);