I've come across a component that has been styled using styled-components:
import styled from 'styled-components'
// By converting the square-block css to a styled-component...
const SquareBlock = styled.div`
width: 100%;
height: 100%;
background-color: ${props => props.color};
`
export default SquareBlock
I want to utilize react-cosmos with the following fixture to dynamically change the background-color of the component based on the props:
import { COLORS } from '../../../constants/tetronimo'
export default {
color: COLORS.I
}
Upon inspecting the React developer tools, I noticed that the PropsProxy component has a fixture prop containing the color property:
JSON.stringify($r.props.fixture, null, 2)
{
"color": "#3cc7d6"
}
How can I make sure that the props are correctly provided to react-cosmos?