React使用css module和className多类名设置

最近在写react的时候碰到了一个小问题：现在css样式我通过下图这样的方式直接引进来的时候，发现会和其他组件里面相同className的会有冲突的现象。正常来说吧，是可以通过不同的组件在className前面加上不同组件的标识做区分的，但是这样感觉不舒服。写习惯了vue的，发现vue里面是可以加scoped将样式私有化，那react应该也会有类似的解决方案吧。

然后找了下发现有个叫做css module的。下图里框着的这刚好就是我想要的。这里是它的地址 CSS Module  

然后看看怎么使用。听说npm eject是个坑，还好这个也不用去eject，create-react-app 2的版本就可以直接使用了，方便快捷用起来也爽 ~ 

注意：然后有一个需要注意的。默认文件名是以 [className].module.scss，就是需要加上.module。本来我也在弄了好久发现不生效，我就eject出来看到config文件下面有写着注释默认是需要加上的，当然如果配置的话就自己去百度看怎么配置了，我这就不写了，怎么简单怎么用~

我想~这个都能看懂为啥这么写吧 ~ 

jsx的{}和把className存数组里，然后join函数在中间加个空格，就拼出了下面这样啦

最后 ~ 有写错的地方麻烦可以指出来哦，也是刚接触几天然后做个整理，蟹蟹  ~ 。 ~  

应用场景 ：

效果图 如下所示：

问题 ：

解决 ：

:hover，:active等伪类无法满足需求。通过 *** 作ClassName的值，来控制列表的样式；设置一个变量 pre ，用于保存上一个蓝底的列表的id值（初始化为第一个）。

本文内容如下 ：

设置项目环境。由于是React项目，在全局环境中安装: create-react-app ，然后运行:

npx create-react-app my-app //创建一个my-app的项目

    在初始化时，着色；

    在点击事件触发时，去掉上一个颜色，并对当前列表着色。

注：不懂或不足之处请留言。

className动态添加

可以实现的语法如下：

1、使用逻辑运算符

2、使用三元运算符

3、使用函数

4、数组语法

5、使用ES6写法（推荐使用ES6写法）

或者使用classnames依赖库

style动态添加

1、当前标签无其他class，并且只动态添加一个className

---