CODEWITHSUNDEEP
reactjstypescriptstyled-components
Joakim Jäderberg
Joakim Jäderberg

Reputation: 422

Override props with styled-components and typescript

I'm using a component that has a property that is required. I want to style that component with said property set and not being required to set it again when rendering. If I don't set it again Typescript complains.

The jist of what I want to do:

const Arrow = styled(<Icon icon={"ArrowRight"}/>)`
    ...
`;

And not being required to set icon when rendering.

If I do this

const Arrow = styled(Icon)`
    ...
`;

Arrow.defaultProps = {
    icon: "ArrowRight",
};

I still have to set icon when rendering.

Is there some way I can achieve this or is my only way out to modify props of Arrow with typescript-magic?

Using

Upvotes: 3

Views: 3656

Answers (1)

Agney
Agney

Reputation: 19194

styled-components has an API named attrs so you can attach properties to DOM elements or components.

const Arrow = styled(Icon).attrs(props => ({
  icon: props.icon // or whatever you want here
}))`

`;

Docs

Upvotes: 5

Related Questions