将 props 从 react-cosmos 传递给 styled-components答案

【问题标题】：Passing props from react-cosmos to styled-components将 props 从 react-cosmos 传递给 styled-components
【发布时间】：2017-04-17 01:15:40
【问题描述】：

我有以下组件，我使用 styled-components 应用了 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 中使用下面这个fixture来根据 props 适配组件的background-color：

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

export default {
  color: COLORS.I
}

在 React 开发者工具中，我注意到组件 PropsProxy 有一个带有 color 属性的fixture prop：

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

{
  "color": "#3cc7d6"
}

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

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

在最新版本的 React Cosmos 中，Props 需要放在 fixture.props 下，但你似乎已经将 figured 这个放在了外面。这能解决您的问题吗？

【讨论】：