可以用css，bootstrap，react-bootstrap等

CSS

行内修饰

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

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就行了：

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

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

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