Passing in parameter to Styled Components

Question

How can I pass in an argument into Styled Components?

What I tried was to create an interface and a styled component:

export interface StyledContainerProps { topValue?: number; } export const StyledContainer: StyledComponentClass<StyledContainerProps> = styled.div` position: absolute; top: `${props.topValue || 0}px`; `;

Then I want to use it like this:

<StyledContainer topValue={123} > This has a distance of 123px to the top </StyledContainer>

But it's saying that props doesn't have the attribute topValue.

kind user · Accepted Answer · 2023-10-02 21:05:32Z

Actually you should receive cannot read property 'topValue' of undefined error.

Use a function insead:

const StyledContainer = styled.div<{ topValue: number }>` top: ${({ topValue = 0 }) => topValue}px; `;

Also a little bonus - you can use argument destructuring and assign a default value for topValue if it doesn't exist (in your particular case - the default value would be 0).

However if you want to assign 0 in every case when topValue is falsy, use:

const StyledContainer = styled.div<{ topValue: number }>` top: ${(props) => props.topValue || 0}px; `;

Note: Doubled backticks are redundant.

It seems like the custom value 123 didn't get passed through but the default value was accepted.
@thadeuszlay It's not possible, actually :) If it doesn't work for you, just use ||.

Jöcker · Accepted Answer · 2020-11-17 09:21:44Z

16

You can pass an argument with Typescript as follows:

<StyledPaper open={open} /> ... const StyledPaper = styled(Paper)<{ open: boolean }>` top: ${p => (p.open ? 0 : 100)}%; `;

answered Nov 17, 2020 at 9:21

Jöcker

7,0483 gold badges45 silver badges53 bronze badges

2 Comments

Sam Over a year ago

The type Paper makes this a bit more confusing I think, if you just replaced Paper with div would this work?

Jöcker Over a year ago

I used Paper on purpose to make an example with a custom component. With a div would it work if you use styled.div<{ open: boolean }> instead.

omzer · Accepted Answer · 2021-12-26 19:44:06Z

Let's assume you have a component that is called Avatar and you need to pass a boolean prop to decide the size of the conponent (40 or 80 pixels).

You define the styled component as follows:

export const UserAvatar = styled(Avatar)` height: ${props => (props.large ? 80 : 40)}px; width: ${props => (props.large ? 80 : 40)}px; `;

And you use it like this: <UserAvatar large="true" />

Collectives™ on Stack Overflow

Passing in parameter to Styled Components

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Linked

Related