使用扩展

Question

说我有这个：

<div>
  <FirstComponent />
  <SecondComponent />
</div>

这2个组件刚刚从它们的居住地导入。我想为它们设置样式，就像我希望SecondComponent在悬停时覆盖FirstComponent一样。我想我可以通过使用z-indexes和东西

来实现

但是，我可以将悬停代码放在哪里？

通常我会在样式化的组件中执行此操作，但这是不可能的，因为这些组件已作为已样式化的组件导入

所以当我尝试这样做时：

const generic = styled.div`
    background-color: blue;
`

FirstComponent = generic.extend

它告诉我不能因为FirstComponent is read-only而存在，所以当这些组件存在我的文件中时如何将它们应用于某些组件？