Styled-components em React com Typescript

Introdução

Styled-components é uma lib de estilização de componentes em aplicações React, que traz flexibilidade na definição da estilização a partir do recebimento de props. A ideia desse artigo é apresentar como funciona a lib, como definir os types das props passadas e sobre a parte de extensão de estilos.

Setup

Adicionando a lib na app:

yarn add styled-components --dev

Estrutura React

A definição da estilização a partir do styled-components segue o seguinte formato:

import styled from "styled-components";

const StyledComponent = styled.htmlElement`
  // propriedades css
`;

const Component = () => (
  <StyledComponent />
);

export default Component;

Acima possui os seguintes elementos:

• import styled: import necessário para estilização a partir da lib
• StyledComponent: onde é colocado as propriedades css do componente Component, usando o styled importado
• htmlElement: onde é definido o tipo de elemento html que corresponde o componente, por exemplo div, button...

Exemplo React

Abaixo vou passar um exemplo simples para um componente de texto (com poucas props para ficar menos cheio o exemplo). A ideia é aplicar a estrutura passada acima e mostrar como funciona a passagem de props:

import styled from "styled-components";

const StyledText = styled.span`
  color: ${(props) => (props.$color ? props.$color : "#000")};
  font-size: ${(props) => (props.$fontSize ? props.$fontSize : "16px")};
`;

const Text = ({
  children,
  color,
  fontSize,
}) => (
  <StyledText
    $color={color}
    $fontSize={fontSize}
  >
    {children}
  </StyledText>
);

export default Text;

Para o componente Text, pode se passar três tipos de props: children, color e fontSize. A primeira para definir o texto que irá aparecer, a segunda e terceira referente a estilização.
Por só as duas últimas serem referentes a estilização, somente elas são passadas via props para o StyledText. Nesse caso está se passando as props com um $ na frente, para evitar vir erro no console referente a passar props para um elemento DOM que não as reconhece.
É definido o elemento html que corresponde o componente em styled.span.
Dentro do const StyledText é definida as propriedades a partir das props passadas. Se vier o $color usa ele para definir a cor, se não usa o #000. Se vier o $fontSize usa ele para definir o tamanho da fonte, se não usa 16px.
Dessa forma está definido o componente a partir da lib, no exemplo foi usado o nome StyledText mas o nome é customizável.

Estrutura React com Typescript

Partindo da estrutura definida acima em Estrutura React, segue o formato com a definição dos types:

import styled from "styled-components";

interface StyledComponentType {
  // definição dos types
}

const StyledComponent = styled.htmlElement<StyledComponentType>`
  // propriedades css
`;

const Component = () => (
  <StyledComponent />
);

export default Component;

Acima é definido a interface logo após styled.htmlElement, com o nome StyledComponentType. Dentro de interface StyledComponentType é onde ocorre a definição dos types.

Exemplo React com Typescript

Agora vou adicionar a parte de types no exemplo presente em Exemplo React:

import styled from "styled-components";

interface StyledTextProps {
  $color?: string;
  $fontSize?: string;
}

interface TextProps {
  children: React.ReactNode;
  color?: string;
  fontSize?: string;
}

const StyledText = styled.span<StyledTextProps>`
  color: ${(props) => (props.$color ? props.$color : "#000")};
  font-size: ${(props) => (props.$fontSize ? props.$fontSize : "16px")};
`;

const Text = ({
  children,
  color,
  fontSize,
}: TextProps) => (
  <StyledText
    $color={color}
    $fontSize={fontSize}
  >
    {children}
  </StyledText>
);

export default Text;

No exemplo acima é definido os types do componente em si TextProps e os provenientes do styled-components <StyledTextProps>, com base nas props que são passadas em cada lugar.

Extensão de estilos

Uma outra coisa que a lib permite é criar um componente que herda a estilização de outro componente, isso é interessante quando se quer componentes semelhantes que mudam pouco um em relação ao outro, mas não se quer dar muita flexibilidade na propriedade que difere passando props.

import styled from "styled-components";

const StyledComponentA = styled.htmlElement`
  // propriedades css A
`;

const StyledComponentB = styled(StyledComponentA)`
  // propriedades css B
`;

const Component = () => (
  <>
    <StyledComponentA />
    <StyledComponentB />
  </>
);

export default Component;

Acima o styledComponentB herda as propriedades definidas para o styledComponentA, e o que for escrito de propriedade dentro de StyledComponentB vai adicionar mais propriedades, ou no caso de ter um mesmo tipo de propriedade que styledComponentA já define, vai sobreescrever ela.

Exemplo extensão de estilos

Agora vou apresentar um exemplo de extensão de estilo com dois botões, que diferem quanto ao padding deles, mas essa propriedade não é flexível, cada um possui ela pré-definida.

import styled from "styled-components";

const StyledButtonA = styled.button`
  border: 2px solid #000;
  cursor: pointer;
  padding: 10px 12px;
`;

const StyledButtonB = styled(StyledButtonA)`
  padding: 15px 20px;
`;

const Buttons = () => (
  <>
    <StyledButtonA>ButtonA</StyledButtonA>
    <StyledButtonB>ButtonB</StyledButtonB>
  </>
);

export default Buttons;

No exemplo acima, o StyledButtonA tem três propriedades definidas: border, cursor e padding. O StyledButtonB está usando as mesma propriedades pois está extendendo os estilos do StyledButtonA, a partir de styled(StyledButtonA), com exceção do padding pois dentro de StyledButtonB foi definido um diferente.

Conclusão

A ideia desse artigo foi passar o funcionamento da lib styled-components em apps React com Typescript, abordando o uso dela, a definição dos types referente a ela e sobre a parte de extensão de estilos.
Para quem quiser saber mais sobre a lib, segue o link da documentação.