css module:样式模块化，解决css样式冲突

一、其他解决方法：！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>
    )
  }
}