Beto Muniz
  • Share

Dica React "as" prop e styled-components

tech

🗣 Sabia que é possível alterar a tag de um componente criado com a biblioteca styled-components sem perder estilos ou ter que criar outro componente?

👉 Basta usar a propriedade as, bem assim ó: 👇

import styled from "styled-components"
const TextoEstilizado = styled.p`
{
/* Estilos CSS do seu componente de texto */
}
`
const App = () => <TextoEstilizado as="span">Meu Texto</TextoEstilizado>

🎨 No caso, o componente TextoEstilizado originalmente declarado como p passará a ser renderizado com um span.

👉 Isso é muito útil pra manter a semântica de marcação e vários outros casos de reusabilidade.

😜 Legal, né?

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.