18 自定义NavLink

 如图,如果我们希望自定义选中的路由链接样式,我们可以自定义 NavLink

第一步,定义一个 MyNAVLink组件,这个组件用来渲染 NavLinK 组件标签

其中,activeClassName 是 react-router 中的标签属性,{ ... this.props } 表示将外部传入的所有属性全局传到 MyNavLink 组件标签中

我们定义的 current 样式是:

这里如果不用 !important 增加权重,我们定义的current 样式会被覆盖

第二步,将 <NavLink > 标签 改为我们自己定义的 <MyNavLink>标签:

这样就成功修改了NavLink 的默认样式,以后如果希望使用我们自定义的样式,只需要使用 MyNavLink 标签即可。

原文地址:https://www.cnblogs.com/shanlu0000/p/12510981.html