样式定义与引入

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