Styled Components - Używanie nazwy komponentu jako selektora w stylu rodzica.

Question

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>
  );