如何解决你如何让 Material-UI Drawer 突出显示它当前所在的页面?
我目前正在尝试使用 Material-UI's drawer component 实现一个网站。它有效,当我单击抽屉项目时,它会将我路由到正确的页面。
但是如何让各个抽屉项目突出显示它所在的当前页面。
例如,如果我在 /dashboard 页面上,并且如果 Dashboard 页面的 Drawer Item 应该突出显示(不同的颜色和样式)以指示我当前动态地位于该页面上。
还没有设法在网上找到任何好的解决方案,而且 Material-UI 文档没有演示如何做到这一点,很高兴听到你们都是如何做到的。
解决方法
您可以通过将 ListItem
属性设置为 Drawer
来突出显示 selected
中的当前 true
,并使用 pathname
信息来确定该项目是否与当前路线:
const routes = {
Home: "/",About: "/about",Users: "/users"
};
const { pathname } = useLocation();
<List>
{Object.keys(routes).map((routeName,index) => {
const route = routes[routeName];
return (
<ListItem selected={route === pathname} button key={route}>
<ListItemText primary={routeName} />
</ListItem>
);
})}
</List>
现场演示
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。