【REACT-cssModule防止污染全局】

cssModule防止css污染全局

1. 将css文件名中间添加‘.module’（films.module.css）

.active1{
  color:pink;
}
#active2{
  color: orange;
}
.films li{
  list-style: none;
}

/* 全局css */
:global(.gcss){
  font-weight: 900;
}

组件内引入并使用

import React from 'react'
import { NavLink } from 'react-router-dom'
import style from '../css/films.module.css'
console.log(style)

export default function Films() {
  return (
    <div className={style.films+' addcss gcss'}>
      <div style={{background:'yellow',height:'300px'}}>1111111111</div>
      <ul>
        <li>
          <NavLink to="/films/NowPlaying" activeClassName={style.active1}>正在热映</NavLink>
        </li>
        <li>
          <NavLink to="/films/CommingSoon" id={style.active2}>即将上映</NavLink>
        </li>
      </ul>
    </div>
  )
}