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.

Answer 1

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.