React 组件样式的处理(持续更新)

阅读数:1370 发布时间:2016-05-08 14:47:36

作者:zzl005 标签: react 朱忠来005 css 组件

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"
}

react-button出来的button

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

内联样式的缺点:

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

通过less等预编译器处理

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

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

相关文章推荐: