React Router中NavLink内嵌套div激活态背景色不生效

问题核心是NavLink的样式被内部嵌套的Chakra UI Flex组件覆盖，同时NavLink默认是inline显示，背景样式无法覆盖Flex组件的区域。当直接在NavLink下放置文本时，没有内部元素遮挡，所以样式能正常生效。

解决方案：将激活状态传递给内部Flex组件 #

把NavLink的isActive状态传递给内部的Flex组件，直接控制Flex的背景色，这样能避开样式覆盖问题，同时利用Chakra UI的样式系统保证优先级。

修改后的代码如下：

import {
  Box,
  CloseButton,
  Flex,
  Icon,
  useColorModeValue,
  Drawer,
  DrawerContent,
  Text,
  useDisclosure,
  BoxProps,
  FlexProps,
} from '@chakra-ui/react';

import {
  FiHome,
  FiCalendar,
  FiBriefcase,
  FiDollarSign,
} from 'react-icons/fi';

import { IoPawOutline } from 'react-icons/io5';
import { IconType } from 'react-icons';
import { NavLink, Outlet } from "react-router-dom";
import Navbar from './Navbar';

<NavLink to={to}>
  {({ isActive }) => (
    <Flex
      align="center"
      p="4"
      mx="4"
      borderRadius={["4px"]}
      role="group"
      cursor="pointer"
      // 用isActive控制Flex的背景色
      bg={isActive ? "green" : "blue"}
      _hover={{
        bg: '#1D3EAC',
        color: 'white',
      }}
      _active={{
        bg: '#1D3EAC',
        color: 'white',
      }}
    >
      {icon && (
        <Icon
          mr="4"
          fontSize="16"
          _groupHover={{
            color: 'white',
          }}
          as={icon}
        />
      )}
      {children}
    </Flex>
  )}
</NavLink>

补充说明 #

• 原写法中NavLink自身设置的style会被Flex组件的bg属性覆盖，因为Chakra UI的组件样式优先级更高。
• 将NavLink的子元素改为函数形式，能直接获取isActive状态，把样式逻辑转移到内部的Flex组件上，确保样式生效范围覆盖整个导航项区域。

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