将自定义道具传递给打字稿中的样式组件[重复]答案

【问题标题】：Passing custom props to styled-component in typescript [duplicate]将自定义道具传递给打字稿中的样式组件[重复]
【发布时间】：2021-11-18 08:00:03
【问题描述】：

我是使用 Typescript 和 Styled-Component React 的新手，我遇到了这个问题。我创建了一个“标题”组件，并且每当单击按钮进入 HeaderStyled 时，我都试图传递状态，因为更改 CSS 样式的概率取决于状态，但出现错误。

import React, {useState} from 'react'
import HeaderStyled from './Header_styled';


const Header = () => {

    const [open,setOpen] = useState(false);

    return (
        <HeaderStyled open={open}>
            <img src="/images/logo.svg" alt="sunnyside_logo" />
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Projects</a></li>
                <li><button>CONTACT</button>  </li>
            </ul>
            <div  onClick={() => setOpen(!open)}>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </HeaderStyled>
    )
}

export default Header;

这是我的 HeaderStyled 组件

const HeaderStyled = styled.div `
    background-color: ${theme.primaryBlue};
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px;
    align-items: center;

    ul {
            position: absolute;
            background-color: white;
            top: 6%;
            width: 80%;
            height: 25%;
            right: 10%;
            display: flex; 
            flex-direction: column;
            padding: 0px;
            align-items: center;
            justify-content: space-around;
            transform: ${({open}) => open ? 'translateX(0)': 'translateX(120%)'};
            li {
                padding: 0px;
                
                a {
                    color: #0000002e;
                }
            }
            
            button {
                background-color: yellow;
                color: black;
            }
        }

我从 HeaderStyled 得到的错误

【问题讨论】：

How do I ask a good question?: "请勿发布代码、数据、错误消息等的图片 - 复制或在问题中输入文本。请保留将图像用于图表或演示渲染错误，这些无法通过文本准确描述的事情。”
Writing in All Caps Is Like Shouting

标签： reactjs typescript styled-components

【解决方案1】：

在 TS 中这样做的方法是定义一个类型或一个接口并将其添加到样式组件中：

type HeaderStyledProps = {
  open: boolean;
}

const HeaderStyled = styled.div<HeaderStyledProps>`
    background-color: ${theme.primaryBlue};
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px;
    align-items: center;

    ul {
            position: absolute;
            background-color: white;
            top: 6%;
            width: 80%;
            height: 25%;
            right: 10%;
            display: flex; 
            flex-direction: column;
            padding: 0px;
            align-items: center;
            justify-content: space-around;
            transform: ${({open}) => open ? 'translateX(0)': 'translateX(120%)'};
            li {
                padding: 0px;
                
                a {
                    color: #0000002e;
                }
            }
            
            button {
                background-color: yellow;
                color: black;
            }
        }
`

【讨论】：

【解决方案2】：

查看 Typescript - Using custom props 的样式化组件文档

import React, { useState } from "react";
import styled from "styled-components";

interface Props {
  open: boolean;
}

const HeaderStyled = styled.div<Props>``;

const Header = () => {
  const [open, setOpen] = useState(false);
  return <HeaderStyled open={open}></HeaderStyled>;
};

export default Header;

【讨论】：