如何设置激活状态NavLink样式？能否将isActive传递给Flex组件？

完全可以通过NavLink的函数子元素特性，把isActive状态传递给Flex组件，以此实现激活态的样式控制，具体实现如下：

核心实现逻辑 #

React Router的NavLink支持传入函数作为子元素，该函数会接收包含isActive（及isPending）状态的参数，你可以利用这个参数动态配置Chakra UI组件的样式属性。

修改后的代码示例 #

// imports
import { Stack, Flex, Box } from "@chakra-ui/react";
import { NavLink } from "react-router-dom";
import { AiOutlineDashboard } from "react-icons/ai";
import { IoApps } from "react-icons/io5";

const App = () => {
  return (
    <Stack spacing={4}>
      <NavLink to="/overview">
        {/* 接收isActive状态，动态设置Flex样式 */}
        {({ isActive }) => (
          <Flex
            align="center"
            p="2"
            mx="2"
            // 激活态样式示例，可根据设计图调整
            bg={isActive ? "blue.50" : "transparent"}
            borderLeft={isActive ? "4px solid blue.500" : "none"}
            color={isActive ? "blue.600" : "gray.600"}
            borderRadius="md"
            transition="all 0.2s"
            _hover={{ bg: "gray.50" }}
          >
            <Box
              p="4px"
              border="1px"
              borderRadius="md"
              color={isActive ? "blue.500" : "gray.400"}
              bg={isActive ? "blue.50" : "transparent"}
            >
              <AiOutlineDashboard size={16} />
            </Box>
            <Box ml={2} fontSize="sm">
              Overview
            </Box>
          </Flex>
        )}
      </NavLink>

      <NavLink to="/app">
        {({ isActive }) => (
          <Flex
            align="center"
            p="2"
            mx="2"
            bg={isActive ? "blue.50" : "transparent"}
            borderLeft={isActive ? "4px solid blue.500" : "none"}
            color={isActive ? "blue.600" : "gray.600"}
            borderRadius="md"
            transition="all 0.2s"
            _hover={{ bg: "gray.50" }}
          >
            <Box
              p="4px"
              border="1px"
              borderRadius="md"
              color={isActive ? "blue.500" : "gray.400"}
              bg={isActive ? "blue.50" : "transparent"}
            >
              <IoApps size={16} />
            </Box>
            <Box ml={2} fontSize="sm">
              Apps
            </Box>
          </Flex>
        )}
      </NavLink>
    </Stack>
  );
};

export default App;

关键说明 #

• 这是React Router官方推荐的自定义激活态样式方案，相比activeClassName更灵活，能直接结合Chakra UI的样式Prop实现动态样式调整。
• 你可以根据目标设计图，修改bg、borderLeft、color等属性的值，完全匹配预期的激活态效果。

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