样式定义与引入

CSS样式

引入CSS文件

动态样式类名

SCSS

Style

Inline Style:行内样式

在React中，如果要使用行内元素，不可以直接使用style="”这种方式，可以有：

import React from 'react';

var style = {
  backgroundColor: '#EEE'
};

export default React.createClass({
  render: function () {
    return (
      <div style={style}>
      //或者<div style={{backgroundColor: '#EEE'}}>
        <h1>Hello world</h1>
      </div>
    )
  }
});

可以看出，React的style属性接收的也是一个JavaScript对象。

Styled Component

Class

你可以根据这个策略为每个组件创建CSS文件，可以让组件名和CSS中的class使用一个命名空间，来避免一个组件中的一些class干扰到另外一些组件的class。

app/components/MyComponent.css

.MyComponent-wrapper  {
    background-color: #eee;
}

app/components/MyComponent.jsx

import "./MyComponent.css";
import React from "react";

export default React.createClass({
  render: function () {
    return (
      <div className="MyComponent-wrapper">
                <h1>Hello world</h1>
              
      </div>
    );
  },
});

## Multiple Class

上文中提及的利用className方式赋值，如果在存在多个类名的情况下：

render: function() {
  var cx = React.addons.classSet;
  var classes = cx({
    'message': true,
    'message-important': this.props.isImportant,
    'message-read': this.props.isRead
  });
  // same final string, but much cleaner
  return <div className={classes}>Great, I'll be there.</div>;
}

这里的classSet只是起到了一个帮助进行类名合成的功能，React官方已经弃用了，改为了这个。

SCSS

最近更新于0001-01-01