Passing props from react-cosmos to styled-components

Question

I have the following component where I have applied the css using styled-components:

import styled from 'styled-components'

// square-block css can be re-written as a styled-component(???)
const SquareBlock = styled.div`
  width: 100%;
  height: 100%;
  background-color: ${props => props.color};
`

export default SquareBlock

I would like to use the following fixture with react-cosmos to adapt the background-color of the component based on the props:

import { COLORS } from '../../../constants/tetronimo'

export default {
  color: COLORS.I
}

In the React developer tools I noticed that the component PropsProxy had a fixture prop which has the color property:

JSON.stringify($r.props.fixture, null, 2)

{
  "color": "#3cc7d6"
}

How can I ensure that props are passed correctly to react-cosmos?

treznik treznik · Accepted Answer · 2017-04-17T05:03:23

Props need to be placed under fixture.props in the latest version of React Cosmos, but you seem to have already figured this out. Does this solve your problem?

Passing props from react-cosmos to styled-components

1 Answers