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

Question

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

从“样式组件”导入样式

// 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 一起使用background-color，以根据道具调整组件的：

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

export default {
  color: COLORS.I
}

在 React 开发人员工具中，我注意到该组件PropsProxy有一个具有以下color属性的夹具道具：

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

{
  "color": "#3cc7d6"
}

如何确保正确传递道具react-cosmos？

Answer 1

Props 需要放在fixture.props最新版本的 React Cosmos 下，但你似乎已经想通了。这能解决你的问题吗？