将参数传递给样式组件

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

错误。

直接使用函数：

const StyledContainer = styled.div<{ topValue: number }>`
    top: ${({ topValue = 0 }) => topValue}px;
`;

还有一点好处 - 您可以使用参数解构并为

topValue

指定默认值（如果它不存在）（在您的特定情况下 - 默认值将是

0

）。

但是，如果您想在

0

为假时在每种情况下分配

topValue

，请使用：

const StyledContainer = styled.div<{ topValue: number }>`
    top: ${(props) => props.topValue || 0}px;
`;

注意：双反引号是多余的。

Answer 2

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

<StyledPaper open={open} />    

...

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

Answer 3

假设您有一个名为

Avatar

的组件，并且您需要传递一个布尔属性来决定组件的大小（40 或 80 像素）。

您可以按如下方式定义样式组件：

export const UserAvatar = styled(Avatar)`
   height: ${props => (props.large ? 80 : 40)}px;
   width:  ${props => (props.large ? 80 : 40)}px;
`;

你可以这样使用它：

<UserAvatar large="true" />