将 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

我想使用以下 fixture 和 react-cosmos 来根据 props 调整组件的 background-color:

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

export default {
  color: COLORS.I
}

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

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

{
  "color": "#3cc7d6"
}

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

Answer 1

在最新版本的 React Cosmos 中，道具需要放在 fixture.props 下，但你似乎已经 figured 了。这是否解决了您的问题？

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

Passing props from react-cosmos to styled-components

javascript

css

reactjs

styled-components