javascript - 将 props 从 react-cosmos 传递到 styled-components

Question

我有以下组件，其中我使用样式化组件应用了 css:

从'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

我想将以下夹具与 react-cosmos 一起使用，以根据 Prop 调整组件的 background-color:

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

export default {
  color: COLORS.I
}

在 React 开发人员工具中，我注意到组件 PropsProxy 有一个 fixture Prop ，它具有 color 属性:

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

{
  "color": "#3cc7d6"
}

如何确保 props 正确传递给 react-cosmos？

Answer 1

在最新版本的React Cosmos中Props需要放在fixture.props下，但是你好像已经figured了这个出来这是否解决了您的问题？