Styled components using .attr with a type inteface

Question

I am using styled components in my project and I want to seperate some styles out in a shared form styles file, however when I try to set the dynamic properties of the .attr() function I cannot find a way that works to set the "Value" dynamically. I have the following code

type submitButtonProps = {
    customText: string
}


export const SubmitButton = styled.input.attrs<submitButtonProps>({
    type: "submit",
    value: ${customText},
})`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;

Any help/pointers would be greatly appreciated

Answer 1

I was able to solve it using the syntax below:

interface submitButtonProps {
    customText: string;
}

export const SubmitButton = styled.input.attrs<submitButtonProps>(({ customText }) => ({
    type: "submit",
    value: customText,
}))<submitButtonProps>`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;