Question

我有options= Options() options.add_argument('--headless') options.add_argument('window-size=1920x1080');个组件，它们分别以Item和itemId作为道具。如果这两个相等（即当前的商品确实是正在编辑的商品），则该商品的边框应为5px纯红色。如果它们不相等，则该项目的边框应为2px纯黑色。看起来平等性正在正确地评估（来自console.logs），但是样式化组件正在将它们视为对itemBeingEdited

的评估

正在运行的演示：https://codesandbox.io/s/styled-components-props-border-s9p47

预期：第一个div的黑色边框应为2px，第二个div的红色边框应为5px。

实际：两个div都有红色边框。

Answer 1

您必须将道具明确传递给<ItemWrapper {...props} />。

const Item = props => {
  console.log(props.itemId === props.itemBeingEdited);
  return <ItemWrapper {...props} />;
};

演示：https://codesandbox.io/s/styled-components-props-border-0ettv

道具未在样式组件div的CSS中正确使用

1 个答案: