导入Material-UI
- 首先创建一个React项目
npm install -g create-react-app
create-react-app myapp
创建一个myapp的react的项目,myapp可以随意写，但不能有大写字母
- 导入Material-UI
npm install material-ui
导入成功,在项目中的package.json中会看到”material-ui”: “版本号”
使用
import React, {Component} from 'react';
import {red50} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
const styles = {
//主标签样式
container: {
textAlign: 'center',
flex: 1,
paddingTop: 64,
backgroundColor: red50,
},
};
class App extends Component {
render() {
return (
//MuiThemeProvider做为主标签,否则使用material-ui会报错
<MuiThemeProvider>
<div style={styles.container}>
{/*添加一个material-ui/Card 控件*/}
<Card>
<CardHeader
title="CardTitle"
subtitle="subTitle"
// images文件夹要放在项目的public文件夹中
avatar="images/4.png"
/>
<CardMedia overlay={
<CardTitle title="overlay title" subtitle="Overlay subtitle"/>
}>
<img src="images/4.png"/>
</CardMedia>
<CardTitle title="Avril Ramona Lavigne" subtitle="Canadian singer-songwriter and actress"/>
<CardText>
Avril Ramona Lavigne is a Canadian singer-songwriter and actress. By the age of 15, she had
appeared on stage with Shania Twain; by 16, she had signed a two-album recording contract
with Arista Records worth more than $2 million. Wikipedia
Born: September 27, 1984 (age 33 years), Belleville, Canada
Height: 5′ 2″
Spouse: Chad Kroeger (m. 2013–2015), Deryck Whibley (m. 2006–2010)
</CardText>
<CardActions>
</CardActions>
</Card>
</div>
</MuiThemeProvider>
);
}
}
export default App;
copy上面的代码到App.js文件中，运行效果如图：
页面上添加了一个Card控件,Card控件中又添加一些其他控件 CardActions, CardHeader, CardMedia, CardTitle, CardText这些控件都是Material-UI提供给我们的，使用需要从Material-UI中导入
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from ‘material-ui/Card’;
导入后直接使用的话，页面会报错，不能正常显示,因为要使用这些控件必须在MuiThemeProvider这个控件内导入MuiThemeProvider
import MuiThemeProvider from ‘material-ui/styles/MuiThemeProvider’
在哪使用material-ui控件，就要将这些控件包裹在MuiThemeProvider里面，因为整个项目中我都要用这些控件所以将MuiThemeProvider做为项目的最底层标签
- 添加onTouchTap事件
material-ui 很多控件有onTouchTap事件，如将上面的页面添加两个按钮
<MuiThemeProvider>
<div style={styles.container}>
{/*添加一个material-ui/Card 控件*/}
<Card>
<CardHeader
title="CardTitle"
subtitle="subTitle"
// images文件夹要放在项目的public文件夹中
avatar="images/4.png"
/>
<CardMedia overlay={
<CardTitle title="overlay title" subtitle="Overlay subtitle"/>
}>
<img src="images/4.png"/>
</CardMedia>
<CardTitle title="Avril Ramona Lavigne" subtitle="Canadian singer-songwriter and actress"/>
<CardText>
Avril Ramona Lavigne is a Canadian singer-songwriter and actress. By the age of 15, she had
appeared on stage with Shania Twain; by 16, she had signed a two-album recording contract
with Arista Records worth more than $2 million. Wikipedia
Born: September 27, 1984 (age 33 years), Belleville, Canada
Height: 5′ 2″
Spouse: Chad Kroeger (m. 2013–2015), Deryck Whibley (m. 2006–2010)
</CardText>
{/*添加两个按钮*/}
<CardActions>
<FlatButton label="button1" onTouchTap={()=>this.buttonClickAction("button1")}/>
<FlatButton label="button2" onTouchTap={()=>this.buttonClickAction("button2")}/>
</CardActions>
</Card>
</div>
</MuiThemeProvider>
点击这两个button没有反应，控制台提示Unknown props onTouchTap,这时就需要导入react-tap-event-plugin包
npm install react-tap-event-plugin
导入后需要在src文件夹下的index.js文件中，添加下面两行代码，onTouchTap才会被捕捉到
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
