0

Tengo el componente <Button /> que le quiero pasa propiedades básicas para después reutilizarlas en un nuevo componente que genero con styled-component.

import React from "react"
import styled from "styled-component"

// button con estilos
import Button from "path/components/Button"

const ButtonRed = styled(Button)`
  color: red;
`

export const MyComponent = () => {
  return (
    <>
      <ButtonRed type="text" variant="default" disable={false}>Uno</ButtonRed>
      <ButtonRed type="text" variant="default" disable={false}>Dos</ButtonRed>
      <ButtonRed type="text" variant="default" disable={false}>Tres</ButtonRed>
    </>
  )
}

Y lo que quiero hacer es que en vez de pasarle las propiedades de text, variant y disable a todos los botones repetidamente, se lo setee directamente en el ButtonRed creado con styled().

1 respuesta 1

0

Suponiendo que styled-component solo interactúa con el atributo del estilo de los elementos, te recomiendo usar un HOC para crear un botón con los atributos que buscas, inclusive podrías cambiarlos agregando parámetros. Por otro lado para no escribirlo, creo que lo mejor sería hacer un map del array de diferentes strings que quieres en los botones.

import React from "react"
import styled from "styled-component"


// button con estilos
import Button from "path/components/Button"

const ButtonRed = styled(Button)`
  color: red;
`

function boton(texto){
    return <ButtonRed key={texto} type="text" variant="default" disable={false}>{texto}</ButtonRed>
} 

export const MyComponent = () => {
  return (
    <>
      {["Uno","Dos","Tres"].map(t=>boton(t))}
    </>
  )
}

Espero haber podido entender tu pregunta, estoy atento a cualquier comentario o duda que tengas.

Update

Encontré en la documentación la manera de pasar props utilizando el método constructor .attrs(), esto parece ser lo que andas buscando:

import React from "react";
import styled from "styled-component";

// button con estilos
import Button from "./Button";

const ButtonRed = styled(Button).attrs({
  key: "texto",
  type: "text",
  variant: "default",
  disable: false
})`
  color: red;
`;


export const MyComponent = () => {
  return <>{["Uno", "Dos", "Tres"].map((t) => (<ButtonRed>{t}</ButtonRed>))}</>;
};
3
  • Yo esperaba una forma en el que puedas pasarle una opción más al stlyed (tipo styled(Button, defaultProps)) o algo componentizado.
    – Kleith
    Commented el 16 abr. 2021 a las 16:58
  • Creo que encontré lo que buscabas.
    – FranAcuna
    Commented el 16 abr. 2021 a las 21:25
  • Eso lo probé pero no funciona.
    – Kleith
    Commented el 17 abr. 2021 a las 13:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.