classnames 插件（react里实现多个className的叠加）

在 react 里，尝试直接添加多个 className 时效果不会叠加，后面的样式会覆盖前面的样式，而不是叠加在一起。这与 vue 的动态 class 语法不同。

那么，在 react 里如何让多个 class 叠加在一起呢？

在 react 中想要动态添加 className 时，通常会使用 classnames 这个库。

安装 classnames：

npm i classnames -S

使用案例：

import React from 'react';
import c from 'classnames';

class MyComponent extends React.Component {

    render() {
        return (
            <div className={c('set-color', 'set-font-size')}>1234567890</div>
        )
    }
}

.set-color {
    color: #f00;
}
.set-font-size {
    font-size: 20px;
}

最终显示的效果是将两个 className 的效果叠加在一起的，见下图：