React Styled Components 没有获得模式道具

Question

我正在使用 react 15.6，在我的组件中，我有一种情况，我想将模式道具传递给 mycustomfunction，它返回一些 css。

export const mycustomfunction = (mode=false) => css`
  ${bp('s_up')`
    padding: ${pxToRem(50)} ${mode? flexGridUnit(0.5) : flexGridUnit(1)} !important;
  `}
`;

如果没有通过，这里默认模式应该是假的。 现在我这样称呼它

const MyFields = styled.div.attrs({
  className: 'someclassname',
})`
  ${mycustomfunction(mode)}
`;

并在渲染方法中

<MyFields mode={test.mode}>
  <SomeOtherFields></SomeOtherFields>
</MyFields>

test.mode 为真或假。

它显示错误，因为模式未在 ${mycustomfunction(mode)} 中定义。

代码有什么问题。

任何帮助深表感谢。

Answer 1

您还没有在样式组件本身中使用 prop mode ：

const MyFields = styled.div.attrs({
  className: "someclassname",
})`
  ${(props) => mycustomfunction(props.mode)}
`;