css no reactjs
Durante o desenvolvimento de uma aplicação, construí um trecho de código de estilização, logo no início, o que permitiu visualizar o detalhe da modificação de cada linha do css interferindo no elemento.
Ainda somente com a estrutura dos elementos do que se tornará o projeto, mas possibilita perceber o que estou fazendo com o css.
A partir do id = “app”, estilizo no arquivo a seguir.
Os elementos #app aside e #app main só foram inseridos para demonstrar os limites de cada elemento.
Na linha 2, o max-width determina a largura máxima da div que tem o id app para o caso do monitor do usuário for muito grande.
Na linha 3, o margin mantem centralizado a div que tem o id app.
Na linha 4, o padding 60px e 30px determinam o espaço em cima e embaixo, depois o da direita e da esquerda.
As próximas linhas são as mais fortes nessa estilização, na minha opnião. Na linha 5, o display permite que os elementos dentro da div que tem o id app sejam livres, e preencham os espaços.
E a linha 6, com o flex-direction diz que o efeito de preechimento da linha 5 será linha a linha.
Na linha 7, o align-items diz que os elementos internos, aside e main, se manterão centralizados e um ao lado do outro.
O resultado foi o seguinte:
O objetivo desse artigo foi demonstrar um exemplo prático de estilização de uma aplicação real, no início do desenvolvimento.
Para esse cenário de estilização com css no js o mais indicado é o uso de styled components. Em um segundo momento próximo, será o tema de estudo.
Esse artigo ficou menor que os demais, mas a intenção é tratar situações mais específicas nesse tipo de tema técnico e prático. Tomara que tenha gostado, aplauda o artigo! Até o próximo artigo e ótimos códigos.
