Question

我有以下组件，我已经使用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

我想使用以下fixture和react-cosmos来根据道具调整组件的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"
}

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

Answer 1

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

将来自react-cosmos的道具传递给样式组件

1 个答案: