Trabalhando com inline-style no Next.js Com TypeScript

Problema

Eu estava codando me TypeScript com o framework Next.js, e precisei usar um style inline. O projeto usa tailwindcss, mas era uma mudança que somente com css puro resolveria.

Então não faz sentido criar um arquivo de css somente para aplicar uma propriedade em um elemento, então decedi fazer uma aplicação de estilo inline, só que só quem usa TypeScript sabe como é! Me apareceu um monte de erros de tipos… Então descobri as tipagens e resolvi criar esse post para facilitar que procura como fazer esse tipo de estilização rapidamente.

Declaração de objeto

Primeiramente é necessário criar um objeto com as suas estilizações. É também importante adicionar o tipo: “React.CSSProperties” no objeto para tudo funcionar sem erro de tipagem. Exemplo:

const listStyle:React.CSSProperties = {
  listStyleType: 'circle',
};

Após a declaração do objeto, basta adicionar dentro da tag a propriedade “style”:

 <ul style={ listStyle }>
  <li>Primeiro item da lista</li>
  <li>Ultimo item da lista</li>
 </ul>

Viu como é fácil ?
Espero ter ajudado!

Dúvidas?

Para qualquer dúvida, sugestões e comentários, lembre-se que esse blog é openSource e seu código é aberto e está disponível no meu github.

Além disso, você pode usar também a seção comentários aqui em baixo!

Saudações, Israel Cena.