样式化的组件：如何在父组件（不同的组件文件）的悬停上应用样式

Question

React和样式化组件世界的新手，如果这非常简单，请您谅解！

我有2个组件，一个按钮和一个图标。

最初，这些文件位于同一个jsx文件中，我可以实现我想要的。但是，由于将它们分开，我很难恢复到正常状态。

这是我的代码，我已对其进行了简化并去除了不必要的代码。

*文件1-button.jsx *

import Icon from '@sd-component/icon';

class ButtonComponent extends React.Component {
    render() {
        return (
            <Button>
                <Icon />
            </Button>
        );
    }
}

*文件2-icon.jsx *

const Icon= styled.i`
    background-color: red

    &:hover,
    ${Button}:hover & { // This line used to work when they were in the same file
        background-color: green;
    }
`


class Component extends React.Component {
    render() {
        return <Icon />;
    }
}

因此，当我将鼠标悬停在按钮上时，我希望更改图标的背景颜色。当它们在同一个jsx文件中时，我能够将此${Button}:hover &添加到我的&:hover中，并且可以正常工作。现在我不确定如何实现此目标，因为icon.jsx中包含图标的CSS，而各自文件中包含按钮的CSS。

任何帮助都会很棒！谢谢！