1

Seguinte, juro que testei vários métodos mas não obtive sucesso. Tenho esse componente de Button que está na cor verde, e gostaria que sempre que eu reutilizar ele eu possa trocar o Background para outra cor. help

(estou utilizando typescript)



interface Props{
  title: string;
  icon?: string;
  path?: string;
}


const Button  = ({title, icon, path}: Props) => {
  return ( 
    <Container>
      <a href={path}>
        <img src={icon}/>
        {title}
      </a>
    </Container>

  
  ) 
}

export default Button;

1 Resposta 1

0

Acredito que esteja utilizando styled-components, então você passará o props para o style:

<Container redColor={true}>

No arquivo style

background-color: ${props => (redColor ? `red` : `green`)};

Não esqueça de inserir a tipagem:

interface MyColorsProp{redColor : boolean}

E declarar no component dentro do style

export const Container = styled.div<MyColorsProp>...
1
  • 1
    Fiz exatamente isso mas sem usar boolean defini a Interface: Newbackground? : string; passei pro componente a propriedade: Newbackground={Newbackground} defini no styled: background: ${props => (props.Newbackground)}; e chamei a propriedade em outra pagina: <Button Newbackground='#67A10F' /> Commented 2/12/2022 às 22:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .