Passing custom props to styled-component in typescript-CodePudding

I'm new to React with Typescript and Styled-Component and I came across this issue. I created a 'Header' component and I was trying to pass the state whenever the button is clicked into the HeaderStyled as a probs to change the CSS style depends on the state but I got error.

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;

Header

Here is my HeaderStyled component

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;
            }
        }

The error I got from HeaderStyled

CodePudding user response：

The way to do it in TS is to define a type or an interface and add that to the styled component:

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;
            }
        }
`

CodePudding user response：

Have a look in the Styled Components docs for