study / 搭配classnames搞样式

最近在一些开源项目中看到使用classnames来处理css样式的写法，主要思想是通过它提供的一个classNames方法，可以设置多个动态的className，这样再应用到组件/标签上，来控制样式的动态修改。

首先第一步，还是先安装classnames依赖包。（个人习惯用npm，其他包管理语法自己找~）

npm install classnames --save

得！安装完报错找不到依赖包！提示安装types/classnames，那就装：

npm install @types/classnames

此时我们可以从安装包中引入classNames方法了。官方介绍这个方法里，既可以传入简单类型：数字/字符串，又可以传入复杂对象或者数组，还可以传null/undefined，一系列栗子如下（我不管，我从官网拷过来的~）：

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'
 
// 各种类型的参数
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'
 
// 其他等于false的值会被忽略
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

栗子看起来简单易懂，对于任意的类型只要他的结果是true，就会被添加到classNames中，我们只需要控制各种类型的结果就可以~

以下是我自己使用的简单栗子，供参考：

import React from "react";

interface IButtonProps {
    isLight?: boolean;
}

const Button: React.FC<IButtonProps> = (props) => {
    const { isLight } = props;
    return <button className={`btn ${isLight ? "btn-light" : ""}`}>
        click
    </button>;
};

export { Button };

在引入classnames之前，经常会遇到以上情况：通过传入的props：isLight的值来控制在button组件中是否加入一个名为btn-light的className，此时选用模板字符串，在字符串中嵌入表达式的方式来解决该问题。

引入classnames后，写法如下：

import React from "react";
import classNames from 'classnames';

interface IButtonProps {
    isLight?: boolean;
}

const Button: React.FC<IButtonProps> = (props) => {
    const { isLight } = props;
    const btnClass = classNames("btn", { "btn-light": isLight });
    return <button className={btnClass}>click</button>;
};

export { Button };

好了，栗子就是这么简单~因为样式加的很少…

如果我们想要在组件上添加多种样式，比如写一个多样式的组件库，此时用classnames真的是再好不过了~