如何在不同组件中创建（悬停）规则时引用另一个组件的样式组件生成的类名称？

Question

我正在创建一个包含样式化组件和React的菜单，并希望图标的颜色在悬停时更改，但我需要它在图标的父项悬停时更改，以便将文本悬停在图标旁边也会激活图标的悬停样式。下面是我用来接近的代码：

import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const Menu = styled.div`
  display: flex;
  flex-direction: column;
`;

const LinkContainer = styled.div`
  display: flex;
  flex-direction: row;
`;

const FontAwesomeIconExtended = styled.div`
  flex: 1;

  display: grid;
  place-items: center;
  height: 40px;
  width: 40px;
  padding: 10px 2px;
  border-radius: 10px;
  transition: color 0.5s ease;

  color: ${(props) => (props.$isactive ? '#fff' : '#CBE3EB')};
  background: ${(props) =>
    props.$isactive
      ? 'linear-gradient(96.34deg, #004157 0%, #0090b2 100%)'
      : '#fff'};

  ${LinkContainer}:hover & {
    color: ${(props) => (props.$isactive ? '#fff' : 'green')};
  }                                                 /* Problem occurring here */
`;

const LinkText = styled.div`
  flex: 1 0 100px;
`;

function NavLink({ ...props }) {
  return (
    <Link to={props.path}>
      <LinkContainer $isactive={props.$isactive}>
        <FontAwesomeIconExtended
          $isactive={props.$isactive}
          icon={props.icon}
          size='2x'
          as={FontAwesomeIcon}
        />
        <LinkText $isactive={props.$isactive}>{props.name}</LinkText>
      </LinkContainer>
    </Link>
  );
}

export default function NavMenu() {
  return (
    <Menu>
      <NavLink path='/' name='Home' icon='house' $isactive />
      <NavLink path='/profile' name='Profile' icon='user' />
      <NavLink path='/payments' name='Payments' icon='credit-card-front' />
      <NavLink path='/contracts' name='Contracts' icon='file-contract' />
      <NavLink path='/messages' name='Messages' icon='mail-bulk' />
      <NavLink path='/messages' name='Documents' icon='folders' />
      <NavLink path='/locations' name='Transfer' icon='truck-moving' />
    </Menu>
  );
}

在以后的组件中引用另一个样式化组件的方式非常聪明，但在本例中，当它创建悬停规则时，它创建时不考虑不同类型的父容器（$isactive===true或$isactive==false），因此所有链接容器都有两个悬停规则，并使用最后定义的规则。这可以通过将$isactive移动到最后一个NavLink组件看到。

这里是devtools的屏幕截图，显示了我所说的两个悬停规则的含义，没有考虑父类，只是父类的一般类型。

我认为解决方案可能涉及在创建悬停规则时对LinkContainer的两种类型的类名进行具体说明，但这似乎不受很好的支持。谢谢你看一下。

Answer 1

通过重复类名，使用另一个“

${LinkContainer}:hover && {