Reactjs 如何在Styled Components库中为普通组件的子组件指定样式

有几个问题与此非常相似，但我找不到我的答案。我想在不使用额外包装器的情况下，为普通react组件内部的已设置样式的组件提供样式

const Child = styled.div`
  background: gray;
`;

const Foo = () => (<div> I am foo <Child> Child</Child> </div>)

const Parent = styled(Foo)`
  ${Child} {
      background: pink;
      color: pink;
  }
`;

const Child=styled.div`
背景：灰色；
`;
const Foo=（）=>（我是Foo Child）
const Parent=styled（Foo）`
${Child}{
背景：粉红色；
颜色：粉红色；
}
`;

我想在某个地方使用

Parent

组件，该组件具有所需的

Child

样式。在这里，我希望覆盖

子组件的背景，但它不起作用

const-App=（）=>{
返回(
开始编辑以查看发生的奇迹：）

我是福娃
);
}
const Child=styled.div`
颜色：黑色；
`;
常量父项=（{children，…props}）=>(
{儿童}
);
const ParentStyle=styled.div`
背景：灰色；
${Child}{
背景：粉红色；
颜色：黑色；
}
`;

检查示例应用程序中的fork
您需要传递
className
道具，以便注入样式，它在许多其他答案和文档中提到：

const Foo = ({ className }) => (
  <div className={className}>
    I am foo <Child> Child</Child>
  </div>
);

constfoo=（{className}）=>(
我是福娃
);

const Foo = ({ className }) => (
  <div className={className}>
    I am foo <Child> Child</Child>
  </div>
);