1

Gostaria de utilizar props em um attr de um componente no styled-components, ou seja:

export const Button = styled.input.attrs({
    type: 'button',
    value: `${props => props.value}`
})`
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    color: black;
    background-color: white;
    border-radius: 5%;
    min-width: 120px;
    height: 35px;
    margin: 50px;
    cursor: pointer;
`

Porém quando eu invoco este componente com

<Button value={'submit'}/>

é retornado o valor literal ou seja ele cria um botão contendo como value um "props => props.value" invés do "submit".

Como resolver esse problema?

1 Resposta 1

1

Está usando o styled-components de maneira errada, não precisa passar para dentro os props value é só passar o valor que esse propriedade já existe, exemplo:

import styled from 'styled-components';

export const Button = styled.input.attrs(props => ({
  type: 'button',  
}))`
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    color: black;
    background-color: white;
    border-radius: 5%;
    min-width: 120px;
    height: 35px;
    margin: 50px;
    cursor: pointer;
`;

export default Button;

e na hora de utilizar:

<Button value={"Submit"} />  

inserir a descrição da imagem aqui

Claro que utilizar props no styled-components é uma prática muito utilizada, mas, está usando de uma maneira que não terá resultado, por exemplo quero criar um <button/> com cores diferentes o código basicamente:

const Btn = styled.button`
  background: ${(props) => props.color};
  color: ${(props) => props.colorText};
  height: 30px;
  width: 150px;
`;

utilizando da seguinte forma:

<Btn color={'red'} colorText={'white'}>
    Color
</Btn>

export default Btn;

inserir a descrição da imagem aqui


Referencia: styled-components

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 .