How to use props in Styled-Components?

Question

I would like to use props in a attr of a component in Styled-Components, that is to say:

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;
`

But when I invoke this component with

<Button value={'submit'}/>

is returned the literal value or it creates a button containing as value a "props => props.value" instead of "Submit".

How to solve this problem?

Answer 1

Is using the Styled-Components wrong way, don’t need to pass inside the props value just pass the value that this property already exists, example:

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;

and when using:

<Button value={"Submit"} />  

Of course use props in the Styled-Components is a widely used practice, but, is using in a way that will not have resulted, for example I want to create a <button/> with different colors the code basically:

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

using as follows:

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

export default Btn;

---

^{Reference: Styled-Components}