React入门系列教程（七）使用className和内联样式

先看看用内联样式方式给react组件加样式：

我们看到与HTML不同的是，JSX中传递给style属性的是个对象，而HTML中是字符串。另外CSS属性的名字是以驼峰风格书写的，属性值为字符串。

下面看看如何使用className：

我们看到在JSX中应用样式名的话使用的属性是className，在HTML中是class。

看起来更清晰的写法：

const props = {
    className="box box-small",
    style={{paddingLeft: 30}},
}

下面我们把组件编程函数组件：

函数组件默认有className和style值，在使用时，重新给style赋了值，结果当然是覆盖了默认值。

那我们想不覆盖，只添加怎么办？

这样既保留了默认属性值，又可以在此基础上添加新的值，这就要看你的组件想怎么设计了。

className可以同样这样处理：

这里唯一有个小小的缺陷，如果我们在使用Box组件时，没有给className赋值，会出现如图1的情况：

图1

如何解决呢？在定义函数组件参数的时候，给个默认值就好了。

//className默认值为空字符串
function Box({style, className = '', ...rest}) {
    return (
        
        
           
    )
}

为啥style没有这个缺陷？开头说了style传的是对象哦，CSS天生键值对的形式恰恰又和对象相符，再加上spread操作符，可见react设计得周到和巧妙。