样式定义与引入

样式定义与引入

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

Could not load image
Copy link
Outline
样式定义与引入
CSS 样式
引入 CSS 文件
动态样式类名
SCSS
Style
Inline Style:行内样式
Styled Component
Class
Multiple Class
SCSS