18 自定义NavLink
如图,如果我们希望自定义选中的路由链接样式,我们可以自定义 NavLink
第一步,定义一个 MyNAVLink组件,这个组件用来渲染 NavLinK 组件标签
其中,activeClassName 是 react-router 中的标签属性,{ ... this.props } 表示将外部传入的所有属性全局传到 MyNavLink 组件标签中
我们定义的 current 样式是:
这里如果不用 !important 增加权重,我们定义的current 样式会被覆盖
第二步,将 <NavLink > 标签 改为我们自己定义的 <MyNavLink>标签:
这样就成功修改了NavLink 的默认样式,以后如果希望使用我们自定义的样式,只需要使用 MyNavLink 标签即可。