脉轮 UI React _activeLink 道具不工作
Chakra UI React _activeLink props not working
我使用 UI 库制作 React 应用程序。我使用 react-router-dom v6 作为路由器和 Chakra UI 作为库。我的应用程序可以正确导航到每个组件。但是,我想让link那个“active”有不同的风格。
这是我的 header:
import { Flex, Link, Icon } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
这是我的代码的 link 部分:
<Link as={RouterLink} to="/dashboard" p={2} _activeLink={{fontWeight:'bold'}}>
<Flex justifyContent="flex-start" ml={4} fontSize='1.25rem' alignItems="center">
<Icon as={FaHome} mr={2} />
Dashboard
</Flex>
</Link>
我使用 _activeLink 道具为 link 激活 class,但它不起作用。我什至尝试更改背景颜色和文本颜色。但是什么都没有改变。我不知道是我在导入库时出错了,还是我的代码中有其他内容。谁能给我解决方案?
react-router-dom
Link
组件没有任何“活动”样式。使用 NavLink
组件。
import { Flex, Link, Icon } from "@chakra-ui/react";
import {
BrowserRouter as Router,
NavLink as RouterLink // <-- import the NavLink component
} from "react-router-dom";
...
<Link
as={RouterLink}
to="/dashboard"
p={2}
_activeLink={{ fontWeight: "bold" }}
>
<Flex
justifyContent="flex-start"
ml={4}
fontSize="1.25rem"
alignItems="center"
>
<Icon as={FaHome} mr={2} />
Dashboard
</Flex>
</Link>
我使用 UI 库制作 React 应用程序。我使用 react-router-dom v6 作为路由器和 Chakra UI 作为库。我的应用程序可以正确导航到每个组件。但是,我想让link那个“active”有不同的风格。
这是我的 header:
import { Flex, Link, Icon } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
这是我的代码的 link 部分:
<Link as={RouterLink} to="/dashboard" p={2} _activeLink={{fontWeight:'bold'}}>
<Flex justifyContent="flex-start" ml={4} fontSize='1.25rem' alignItems="center">
<Icon as={FaHome} mr={2} />
Dashboard
</Flex>
</Link>
我使用 _activeLink 道具为 link 激活 class,但它不起作用。我什至尝试更改背景颜色和文本颜色。但是什么都没有改变。我不知道是我在导入库时出错了,还是我的代码中有其他内容。谁能给我解决方案?
react-router-dom
Link
组件没有任何“活动”样式。使用 NavLink
组件。
import { Flex, Link, Icon } from "@chakra-ui/react";
import {
BrowserRouter as Router,
NavLink as RouterLink // <-- import the NavLink component
} from "react-router-dom";
...
<Link
as={RouterLink}
to="/dashboard"
p={2}
_activeLink={{ fontWeight: "bold" }}
>
<Flex
justifyContent="flex-start"
ml={4}
fontSize="1.25rem"
alignItems="center"
>
<Icon as={FaHome} mr={2} />
Dashboard
</Flex>
</Link>