reactjs - 将参数传递给样式化组件

Question

如何将参数传递给样式化组件？

我尝试的是创建一个界面和一个样式化的组件:

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;

备注 : 双反引号是多余的。