React 组件样式的处理（持续更新）

React.js 组件中样式的处理

内联样式（css in js）

下面是一个组件的div

<div style={xyt_li_button}></div>

div中是一个 button ，定义样式如下：

var xyt_li_button = {div
    backgroundColor: "#00AFC8",
    width: "60px",
    height: "80px",
    border: "2px solid white",
    borderRadius: "10px",
    boxShadow: "2px 2px 2px #888888"
}

出来的button

在 React 中，行内样式并不是以字符串的形式出现，而是通过一个特定的样式对象来指定, key 值是用驼峰形式表示的样式名，如backgroundColor，而其对应的值则是样式值，一般是个字符串，如backgroundColor: "#00AFC8"

内联样式的缺点：

1. 违背了结构与样式分离的初衷
2. 不支持一些伪类/伪元素/media query 等
3. 书写起来比较困难

通过less等预编译器处理

也可以通过 less 等 css 预编译器...

参考：
React 组件中如何组织 CSS(GithubIssue讨论)