样式组件 - 为什么道具位置会影响样式？

Question

我正在使用 styled-components 为组件中的父元素和子元素设置样式：

function StyledDemo({
  name,
  light,
  ...props
}) {
  return (
    <Parent {...props}>
      <Child>{name}</Child>
    </Parent>
  );
}

我有一个 light 道具，它是 true/false - 但我在根据属性的值设置元素样式时遇到问题：

const Parent = styled.div`
  background-color: #000;
  width: 100%;

  ${props => props.light && `
    background-color: #ccc;
  `}
`;

样式似乎只有在我删除单独传递给函数的道具时才有效。

Parent 元素使用基于 light 属性值的正确样式，条件是：

function StyledDemo({ name, ...props })

Parent 元素不使用基于 light prop 值的正确样式，当：

function StyledDemo({ name, light, ...props })

我可以通过在 Parent 和 Child 组件上设置 prop 来使它全部工作，但这似乎不是最好的方法：

return (
  <Parent {...props} light={light}>
    <Child light={light}>{name}</Child>
  </Parent>
);

这是基于道具将样式应用到组件的正确方法吗，还是我的方法有问题？

Answer 1

这与styled-components无关，但与其余参数有关。

当您执行剩余运算符时，您按名称 "pick" 输出的任何属性都不会包含在 ...rest 变量中。所以当你这样做时

const Button = ({ light, ...rest }) => ()

<Button light primary />

rest 将只包含 primary 属性，而不包含 light，现在它是自己的变量。

如果你这样做了

const Button = ({ ...rest }) => ()

<Button light primary />

而 rest 也将包含 light.

因此在您的示例中，您从 ...props 中挑选出 light，因此当您将 {...props} 传递给父级时，它不包含 light再也没有了，所以 styled-components 不知道它的存在！要么使用第一个版本，要么必须手动将其应用到每个组件。

有关剩余参数的更多信息，请参见MDN！

Styled Components - why does prop position affect styling?