在react項目中使用material ui

筆記如何在react項目中使用material ui

1- 安裝material-ui到項目中 npm i -D material-ui react-tap-event-plugin

2- 在index.js中 將material ui import進來

//index.js
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

3- 在material-ui Components中選擇要使用的組件， import要使用的material-ui組件，如在NavBar.js中使用Tab

// NavBar.js
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

 

4- 在 return中貼上組件的div內容,如:

<Tabs>
   <Tab label="Home" />
   <Tab label="Account" />
   <Tab label="About" />				
</Tabs>

 

5- 在 render中加入行內的style樣式

let styles = {
	tabs: {
		width: '390px',
		position: 'absolute',
		right: '60px',
		textTransform: 'uppercase',
	},
	tab: {
		height: '64px',
		color: '#fff',
	},
	inkBar: {
		height: '4px',
		marginTop: '-4px',
	},
};

 

6- 將樣式代入div中，以 style={} 的方式填入

<Tabs tabItemContainerStyle={{ backgroundColor: 'transparent'}} style={styles.tabs} inkBarStyle={styles.inkBar}>
	<Tab style={styles.tab}label="Home" />
	<Tab style={styles.tab}label="Account" />
	<Tab style={styles.tab}label="About" />				
</Tabs>

<Tabs tabItemContainerStyle={{ backgroundColor: ‘transparent’}} style={styles.tabs} inkBarStyle={styles.inkBar}>  為另一種行內樣式的寫法

 

完整的內容如下:

import React, { Component } from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

class NavBar extends Component {
	render() {
		let styles = {
			tabs: {
				width: '390px',
				position: 'absolute',
				right: '60px',
				textTransform: 'uppercase',
			},
			tab: {
				height: '64px',
				color: '#fff',
			},
			inkBar: {
				height: '4px',
				marginTop: '-4px',
			},
		};
		return (
			<div className="app-header">
				<Tabs tabItemContainerStyle={{ backgroundColor: 'transparent'}} style={styles.tabs} inkBarStyle={styles.inkBar}>
					<Tab style={styles.tab}label="Home" />
					<Tab style={styles.tab}label="Account" />
					<Tab style={styles.tab}label="About" />				
				</Tabs>
			</div>
			
		);
	}
}

export default NavBar;