Pular para o conteúdo principal

Text

Base​

Itálico​

Tamanhos e pesos​

Altere os valores para ver o resultado.

Elemento personalizado​

Colorido​

Truncate​

Quebra de palavras​

Utilize a propriedade wordBreak para quebrar as palavras quando estiver em um container com tamanho limitado. Isso é útil quando você não controla o tamanho do texto que será exibido (por exemplo URLs, subdomínios, etc...).

Forwarded Props​

Para envolver o Text em um styled() do Styled Components, use a propriedade forwardedAs para passar os estilos desejados. Se não for necessário, use a propriedade as, de acordo com o exemplo de elemento personalizado.

import React from 'react';
import styled from 'styled-components';
import { Text } from '@resultadosdigitais/tangram-components';

const CustomText = styled(Text)`
  margin-bottom: var(--size-spacing-04);
`;

const ForwardedProps = () => {
  return (
    <>
      <CustomText as="div" textColor="--success-text" isItalic>
        ❌ Wrong way! The Text component doesn't receive the{' '}
        <code>textColor</code> and <code>isItalic</code> props.
      </CustomText>

      <CustomText forwardedAs="div" textColor="--success-text" isItalic>
        ✅ Correct way! The Text component receive the <code>textColor</code>{' '}
        and <code>isItalic</code> props.
      </CustomText>
    </>
  );
};

export default ForwardedProps;

Feedback​