时间戳

首页 > 解决方案 > 当导航链接被激活时，如何设置导航链接内的元素样式？

reactjs - 当导航链接被激活时，如何设置导航链接内的元素样式？

问题描述

如何设置<li>内部元素的背景样式<NavLink>

<ul>
            <NavLink  activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="">
                <li>Home</li>
            </NavLink>
           
            <NavLink activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="/about">
                <li>About</li>
            </NavLink>
            <NavLink activeStyle={{backgroundColor: '#fff', fontSize: '19px'}} exact to="/contact">
                <li>Contact</li>
            </NavLink>
        </ul>

现在我一直在尝试使用，activeStyle但对我来说并不顺利，因为它可能设置了<a>标签的样式。<li>您可以使用活动样式设置标签的背景，<NavLink>或者可能有解决方法吗？

先感谢您

标签： reactjsreact-router

解决方案

您可以使用activeClassName属性：

<NavLink to="/faq" activeClassName="selected">
  ...
</NavLink>

推荐阅读