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

我使用已设置样式的组件来设置组件中的父元素和子元素的样式：

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

只有当我移除单独传递到函数中的道具时，样式才会起作用

Parent

元素在以下情况下基于

light

prop值使用正确的样式：

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

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

父元素

元素在以下情况下不使用基于

灯光

道具值的正确样式：

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

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

我可以通过在

Parent

和

Child

组件上设置道具来实现这一切，但这似乎不是最好的方式：

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

返回(
{name}
);

这是基于道具将样式应用于组件的正确方法，还是我的方法存在问题

如果有帮助，我可以修改一个演示：

---

这与

样式化组件无关，而是与rest参数有关

执行rest运算符时，按名称“拾取”的任何属性都不会包含在
…rest
变量中。所以当你这么做的时候

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

<Button light primary />

相反，
rest
也将包含
light

因此，在您的示例中，您正在从
..props
中选择
灯光
，因此当您将
{..props}
传递给父级时，它不再包含
灯光
，因此
样式化组件
不知道它存在！要么使用第一个版本，要么必须手动将其应用于每个组件

有关rest参数的更多信息，请参见