Передача параметра в стилизованные компоненты

Question

Как передать аргумент в Styled Components?

Я пытался создать интерфейс и стилизованный компонент:

export interface StyledContainerProps {
  topValue?: number;
}

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

Затем я хочу использовать его следующим образом.:

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

Но это говорит о том, что props не имеет атрибута topValue.

Answer 1

На самом деле вы должны получить cannot read property 'topValue' of undefined ошибку.

Использовать функцию insead:

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

Также небольшой бонус - вы можете использовать деструктурирование аргумента и назначить значение по умолчанию для topValue если он не существует (в вашем конкретном случае - значение по умолчанию будет 0).

Однако, если вы хотите назначить 0 в каждом случае, когда topValue ложно, используйте:

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

Примечание : Удвоенные обратные запоры являются избыточными.