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;

注意：双引号是多余的。

Answer 2

您可以使用Typescript传递参数，如下所示：

<StyledPaper open={open} />    

...

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

将参数传递给样式化组件

2 个答案: