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

Question

我有 Item 个组件，它们采用 itemId 和 itemBeingEdited 作为道具。如果这两个相等（即当前项确实是正在编辑的项），则该项的边框应为 5px 纯红色。如果它们不相等，则该项目的边框应为 2px 纯黑色。虽然看起来等式正在被正确评估（来自 console.logs），但 styled-components 将它们都视为评估为 TRUE

工作演示：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 中未正确使用道具

Props not being used correctly in styled-components div's CSS

reactjs

styled-components