前提:在做React项目时,发现使用NavLink同时设置className默认样式和activeClassName选中样式,选中样式不生效问题
【示例】
样式内容:
/* tabbar.module.css文件 */
.active {
color: red;
}
.nav {
text-decoration: none;
color: black;
}
样式引用:
import style from "../view/css/tabbar.module.css";
组件使用:
<NavLink to="/films" className={style.nav} activeClassName={style.active}>
电影
</NavLink>
执行项目后,标签选中状态应该变成红色的,但没有生效!
【解决方案】
样式内容:
/* tabbar.module.css文件 */
.active {
color: red !important;
}
.nav {
text-decoration: none;
color: black;
}
改变css优先级,加上 !important
,就可以实现我们想要的效果。