样式定义与引入

样式定义与引入

CSS 样式

引入 CSS 文件

动态样式类名

SCSS

Style

Inline Style:行内样式

在 React 中,如果要使用行内元素,不可以直接使用 style="”这种方式,可以有:
1
import React from 'react';
2
3
var style = {
4
backgroundColor: '#EEE'
5
};
6
7
export default React.createClass({
8
render: function () {
9
return (
10
<div style={style}>
11
//或者<div style={{backgroundColor: '#EEE'}}>
12
<h1>Hello world</h1>
13
</div>
14
)
15
}
16
});
Copied!
可以看出,React 的 style 属性接收的也是一个 JavaScript 对象。

Styled Component

Class

你可以根据这个策略为每个组件创建 CSS 文件,可以让组件名和 CSS 中的 class 使用一个命名空间,来避免一个组件中的一些 class 干扰到另外一些组件的 class。
app/components/MyComponent.css
1
.MyComponent-wrapper {
2
background-color: #eee;
3
}
Copied!
app/components/MyComponent.jsx
1
import './MyComponent.css';
2
import React from 'react';
3
4
export default React.createClass({
5
render: function() {
6
return (
7
<div className="MyComponent-wrapper">
8
<h1>Hello world</h1>
9
10
</div>
11
);
12
}
13
});
Copied!

Multiple Class

上文中提及的利用 className 方式赋值,如果在存在多个类名的情况下:
1
render: function() {
2
var cx = React.addons.classSet;
3
var classes = cx({
4
'message': true,
5
'message-important': this.props.isImportant,
6
'message-read': this.props.isRead
7
});
8
// same final string, but much cleaner
9
return <div className={classes}>Great, I'll be there.</div>;
10
}
Copied!
这里的 classSet 只是起到了一个帮助进行类名合成的功能,React 官方已经弃用了,改为了这个

SCSS

Could not load image
Last modified 2yr ago