How to use styled-component CSS props with Typescript

Question

I map over an array of colors, which is defined in the database. I want to pass this colors as background for the created divs. Like I am used to, the console shows me, that the colors out of the array are passed in as prop. But using the props in styled components not works in typescript. I tried the following, what I have found in the net:

import * as types from 'styled-components/cssprop'

import type {} from 'styled-components/cssprop';

/// <reference types="styled-components/cssprop" />

I only passed this variations into my file. The both snippets:

<ColorHolder>
    {item.colors.map((color)=>(
     <div color={color}></div>
      ))}
    </ColorHolder>

css:

 & div{
        width:20px;
        height:20px;
        border-radius:50%;
        background:${props=>props.color};
    }

Josal · Accepted Answer · 2022-09-29 13:54:31Z

2

As far as I understand your code, you don't need to use any libraries. Here is the working example, where colors in the array you fetched from backend

<div>
{
colors.map(color=>(
    <div style={{backgroundColor: color, height: "50px",width: "50px"}}>
    .
    </div>))
}
</div>

Here's full example - codesandbox.io

edited Sep 29, 2022 at 13:54

answered Sep 29, 2022 at 7:54

Josal

3442 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roman Over a year ago

Thank you, I was used to take the library, but so it works either.

ghybs · Accepted Answer · 2022-09-29 08:03:57Z

2

Only styled components can receive props for this style adaptation technique.

Therefore in your case simply create a quick styled div:

const StyledDiv = styled.div<{ color: string }>`
  background: ${props => props.color};
`;

<ColorHolder>
  {item.colors.map((color) => (
    <StyledDiv color={color}></StyledDiv>
  ))}
</ColorHolder>

answered Sep 29, 2022 at 8:03

ghybs

54k6 gold badges90 silver badges117 bronze badges

1 Comment

Roman Over a year ago

Thanks ghybs, that's a great tip.

Collectives™ on Stack Overflow

How to use styled-component CSS props with Typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related