ReactJS5 - 修饰

可以用css,bootstrap,react-bootstrap等

CSS

行内修饰

语法为style={{}},如<h1 style={{color:'green'}}>ReactJS</h1>就会渲染绿色的h1标签的ReactJS。和html不同,react里面使用驼峰命名,并且去除了-,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';

class Demo extends React.Component{
render(){
return(
<React.Fragment>
<h1 style={{color:'green', fontFamily:'cursive'}}>ReactJS</h1>
<h1 style={{color:'green'}}>ReactJS</h1>
</React.Fragment>
)
}
}

export default Demo;

展示效果为:

引用css文件

打开默认的App.js的话,就能看到顶端代码是这样的:

1
2
3
import React from 'react';
import logo from './logo.svg';
import './App.css';

这就是css文件怎么被引用的方法了。

bootstrap

使用npx create-react-app myapp这样的命令行创建的react项目是没有bootstrap的js文件的。因此需要单独下载bootstrap:

1
$ npm install bootstrap

随后,直接引用bootstrap就行了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class Demo extends React.Component{
render(){
return(
<React.Fragment>
<button className="btn btn-success">提交</button>
</React.Fragment>
)
}
}

export default Demo;

展示效果为:

值得注意的就是,在下载bootstrap之前,必须要下载jQuery。

react-bootstrap

来自FB的官方支持bootstrap增强功能型,下载命令为:

1
$ npm install react-bootstrap bootstrap

感觉相对而言可以少记一点东西……?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import {Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

class Demo extends React.Component{
render(){
return(
<React.Fragment>
<Button variant='danger'>点击这里</Button><br/>
<Button variant='outline-danger'>点击这里</Button> <br/>
<Button variant="outline-warning">点击这里</Button> <br/>
<Button variant="outline-primary">点击这里</Button> <br/>
</React.Fragment>
)
}
}

export default Demo;

展示效果为:

更多的可以参考官方资料:React Bootstrap

当然,它取名为react-bootstrap是有原因的……如果不导入bootstrap的js文件的话,是没有办法装饰的。

Material-UI

也比较火,但是没怎么用过……这一块先留白等着以后自己继续学习吧。

Reference

React Bootstrap

-------The end of this article  Thank you for your reading-------
0%