Skip to main content
adicionou 33 caracteres ao conteúdo; título editado
Fonte Link
novic
  • 36,7mil
  • 4
  • 32
  • 70

Como utilizar props no styled components-components?

Olá, gostariaGostaria de utilizar propsprops em um attrattr de um componente no styled componentsstyled-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'}/>

<Button value={'submit'}/>

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

alguém sabe como arrumar issoComo resolver esse problema? obrigado gente!

Como utilizar props no styled components

Olá, 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"

alguém sabe como arrumar isso? obrigado gente!

Como utilizar props no styled-components?

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?

Fonte Link

Como utilizar props no styled components

Olá, 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"

alguém sabe como arrumar isso? obrigado gente!