Passing custom props to styled-component in typescript

Question

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

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. Please reserve the use of images for diagrams or demonstrating rendering bugs, things that are impossible to describe accurately via text."_ — Andreas, Sep 25 '21 at 10:20
[Writing in All Caps Is Like Shouting](https://www.lifewire.com/why-not-to-write-in-all-caps-1173242) — Andreas, Sep 25 '21 at 10:21

ksav · Answer 1 · 2021-09-26T11:06:30.930

2

Have a look in the Styled Components docs for 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;

edited Sep 26 '21 at 11:06

answered Sep 25 '21 at 10:17

ksav

20,015
6
46
66

score 1 · Answer 2 · answered Sep 25 '21 at 10:28

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

Passing custom props to styled-component in typescript

2 Answers2