reactjs - styled-components，引用其他组件并使用它的props？

Question

我如何使这项工作？
img被传递为 <Child />的 Prop ，我想在 <Parent /> 时更改 child 的背景图片被悬停

<Parent>
  <Child img={'path/to/img.png'}/>
</Parent>

const Child = styled.div`

`;

const Parent = styled.div`
  &:hover {
    ${Child} {
      background-image: url(${props => props.img});
    }
  }
`;

Answer 1

希望这可以帮到你!

   &:hover ${Child}{
      background-image: url(${props => props.image && css`${props.image}`});
   }

这是工作示例 https://codepen.io/hardik-chaudhary/pen/rKEKWG

UPDATED CODE

在 child 而不是 parent 中使用悬停代码。一切正常。我还更新了笔中的代码( https://codepen.io/hardik-chaudhary/pen/rKEKWG )。

const Child = styled.div`
   ${Parent}:hover & {
      background-image: url(${props => props.image && css`${props.image}`});
  }
`;