styled-components中如何引用其他组件生成的className编写hover规则

解决方案 #

你可以将悬停状态的图标颜色控制逻辑转移到父组件LinkContainer中实现，自然就能关联父组件自身的$isactive状态，避免规则冲突：

核心修改点 #

1. 删去FontAwesomeIconExtended中原有的父元素悬停样式规则
2. 在LinkContainer中添加悬停时对内部图标的颜色控制，直接使用自身的$isactive属性判断颜色值

修改后的完整代码如下：

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;
  /* 新增：悬停时控制内部图标颜色 */
  &:hover ${FontAwesomeIconExtended} {
    color: ${(props) => (props.$isactive ? '#fff' : 'green')};
  }
`;

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'};
`;

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>
  );
}

方案说明 #

这种写法利用了styled-components可以在父组件样式中引用子组件类名的特性，父组件本身可以直接拿到自己的$isactive属性做判断，生成的CSS规则会自动对应不同状态的父容器类名，不会出现规则覆盖的问题，完全满足交互需求：

• 激活状态的菜单项，无论是否悬停，图标颜色始终为白色
• 非激活状态的菜单项，悬停整个容器时图标变为绿色，离开后恢复原有颜色

内容的提问来源于stack exchange，提问作者moranja