Source
r/reactjs•
Traim

[styled components] How can I create a list of 10 styled components with a different background color?

OptionColor is here a styled component and each of them should have a different background CSS value which it gets from an object.

const colorElements = colors.map(color => (
      <OptionColor
        background={this.props.cssColors[color]}
        onClick={e => handleClick(color, e)}
      />
    ));

Would appreciate some help, thanks.

Posted Jul 27, 2018, 2:35 PM UTC

12
TraimOP•

Solution: Use attrs()

https://www.styled-components.com/docs/basics#attaching-additional-props

1
arcticicestudio•
const OptionColor = styled.option`
  background-color: ${({ background }) => background};
`

Adapting to props is one of the main basic concepts of styled-components.

You should read the docs to learn the basics of the library, it includes almost everything you need to know to get productive.

1