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:

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:

top: ${(props) => props.topValue || 0}px;

Note: Doubled backticks are redundant.

Answer 2

You can pass an argument with Typescript as follows:

<StyledPaper open={open} />    

...

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