Cascata no styled-components

Faaala Dev's! Hoje eu vou passar para vocês um "truck" no styled-components que eu demorei para pegar, não é dificil. Sabe quando nós vamos usar o CSS? Ele é escrito assim:

.container {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.container form {
   max-width: 300px;
   border: 1px solid #cd35bf;
}

Viu só! Ele é escrito no formato de cascata .container form. Daí eu pensei "preciso fazer isso no styled-components", mas como? Galera, é muito fácil, a sintaxe é assim:

import styled from 'styled-components';

export const Container = styled.div`
   margin: 0;
   padding: 0;
   box-sizing: border-box;

   form {
     max-width: 300px;
     border: 1px solid #cd35bf;

     h1 {
       color: #cd35bf;
       font-family: 'Roboto', sans-serif;
     }
   }
`;

Viu só, basta encadear no formato de objeto, onde h1 está dentro de form que estão dentro de Container.

Bom dev's por hoje é isso, qualquer dúvida ou sugestão comentem que eu busco para vocês, vaaleu! 😎