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! 😎
Top comments (0)