CSS-in-Js: aplicando estilos dentro do arquivo javascript
- #JavaScript
- #CSS
- #React
Olá, seja muito bem vindo(a), anteriormente nós conhecemos o que são componentes e criamos o nosso primeiro componente para o projeto do e-commerce usando Next.js: https://programacao-descomplicada.blogspot.com/2022/11/o-que-sao-componentes-em-react.html, agora iremos colocar a estilização do componente usando css-in-js.
Para isso podemos usar o Styled-Components que é uma das formas de usar o css-in-js, o link da biblioteca é o seguinte: https://styled-components.com/. Fica a dica conhecer um sobre ele em um próximo artigo, mas hoje nós vamos usar uma forma nativa do Next.js para isso.
O styled-jsx: https://github.com/vercel/styled-jsx, vai nos permitir escrever o css dentro do javascript porém vamos precisar de uma estrutura para isso:
<style jsx>{` `}</style>
Não precisamos instalar nenhuma dependência já que o styled-jsx é nativo do Next.js, o que precisamos é colocar essa estrutura dentro do nosso componente do cabeçalho e jogar o nosso CSS feito anteriormente dentro dele, dessa forma:
export function Header() {
return (
<>
<header className="c-header">
<div className="c-header__logo">
<iconify-icon className="c-header__icon" icon="akar-icons:game-controller"></iconify-icon>
<a href="./index.html">
<h1 className="c-header__title">Player<span>One</span></h1>
</a>
</div>
<div>
<a href="./pages/login.html" className="c-header__button-login">Login</a>
</div>
</header>
<style jsx>{`
* {
padding: 0;
margin: 0;
text-decoration: none;
box-sizing: border-box;
}
.c-header {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1rem;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
background: #fff;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.c-header__logo {
display: flex;
align-items: center;
font-size: 1.5rem;
}
.c-header__title {
margin-left: 0.5rem;
color: #000;
}
.c-header__title span {
color: #628FD9;
}
.c-header__icon {
color: #628FD9;
font-size: 2rem;
}
.c-header__button-login {
padding: 0.5rem 1rem;
background: transparent;
border: 2px solid #628FD9;
color: #628FD9;
transition: all 300ms ease-out;
}
.c-header__button-login:hover {
background: #628FD9;
color: #fff;
}
`}</style>
</>
)
}
Com isso temos o nosso cabeçalho estilizado usando css-in-js, outro ponto que podemos perceber é que criamos css de reset dentro desse nosso css, mas esse reset só funciona no componente do cabeçalho, como fazer um arquivo de css global para todo o projeto React? Podemos usar o Styled-Components dessa vez para resolver isso como outra forma de fazer css-in-js no próximo artigo, um abraço e até a próxima.
Artigo Original: https://programacao-descomplicada.blogspot.com/2022/11/css-in-js-aplicando-estilos-dentro-do.html
