1

When I do this:

const Button = styled.button.attrs((props:ButtonProps) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
}))

I get the following error with TS: enter image description here

My Types are as follows

type ButtonProps = {
    buttonType?: 'primary' | 'secondary' | 'critical';
    children?: React.ReactChild | React.ReactChild[];
    buttonSize?: 'small' | 'medium';
};

The problem fixes itself however when I pass down the original props with the edited attributes like thus:

const Button = styled.button.attrs((props:ButtonProps) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
  ...props
}))

I've seen elsewhere online I'm supposed to type props in attrs the same way I'd do so with plain styled-components like here:

const Button = styled.button.attrs<ButtonProps>((props) => ({
    primary: props.buttonType === 'primary',
    secondary: props.buttonType === 'secondary',
    critical: props.buttonType === 'critical',
    small: props.buttonSize === 'small',
}))

But this just gives me the same error as in the image :/

Thomas Moore
  • 31
  • 6

1 Answers1

0

I have same problem but i solved it by removing attrs. This is my code. I hope it will help you

styled define

component

Thuan Nguyen
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 24 '22 at 00:19
  • 2
    This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32511779) – Cyrus Raoufi Aug 24 '22 at 15:11