一、其他解决方法:!important优先级提升、内联样式设置、细化选择符、
二、css module
react是单页面应用,不同组件间会出现样式冲突,react默认开启css module,以此来解决样式冲突问题。
1.命名
Tabbar.module.css
2.使用
import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'
import style from "./css/Tabbar.module.css";
console.log(style);
export default class Tabbar extends Component {
render() {
return (
<div className={style.Tabbar}>
<ul>
{/* 自定义高亮样式 css module*/}
<li><NavLink to="/films" activeClassName={style.active}>电影</NavLink></li>
<li><NavLink to="/cinemas" activeClassName={style.active}>影院</NavLink></li>
<li><NavLink to="/center" activeClassName={style.active}>我的</NavLink></li>
</ul>
</div>
)
}
}