javascript - Truyền tham số vào Styled Components

Làm thế nào tôi có thể truyền một đối số vào Styled Components?

Những gì tôi đã thử là tạo một giao diện và một thành phần được tạo kiểu:

export interface StyledContainerProps {
  topValue?: number;
}

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

Sau đó tôi muốn sử dụng nó như thế này:

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

Nhưng nó đang nói rằng props không có thuộc tính topValue.

Câu trả lời #1

Thực ra bạn nên nhận được lỗi cannot read property 'topValue' of undefined.

Sử dụng một hàm thay vào đó:

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

Cũng có một chút phần thưởng - bạn có thể sử dụng giải cấu trúc đối số và gán một giá trị mặc định cho topValue nếu nó không tồn tại (trong trường hợp cụ thể của bạn - giá trị mặc định sẽ là 0).

Tuy nhiên, nếu bạn muốn gán 0 trong mọi trường hợp khi topValue là giá trị sai, hãy sử dụng:

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

Ghi chú: Dấu nháy kép backtick là thừa.

Câu trả lời #2

Bạn có thể truyền một đối số với Typescript như sau:

<StyledPaper open={open} />    

...

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