material ui 是 react 的ui框架

安裝

可透過npm包安裝

// 用npm安装
npm install @material-ui/core

// 用yarn安装
yarn add @material-ui/core

• reset css用法 CssBaseline

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import CssBaseline from '@material-ui/core/CssBaseline'

ReactDOM.render(
  <React.Fragment>
    <CssBaseline />
    <App />
  </React.Fragment>,
  document.getElementById('root')
);

Theme provider

• material ui定義全域顏色

在最外層將要套用的區域包起來

import {ThemeProvider}  from '@material-ui/core/styles';
// theme為自訂義的顏色存放位置
import {theme} from './commom/theme'

<ThemeProvider theme={theme}>
  <App/>
</ThemeProvider>

// theme.js
import {createMuiTheme} from '@material-ui/core/styles';

export const theme = createMuiTheme({
    status: {
        blackBg: '#4444',
    },
});

在themeProvider底層下的原件就可以直接調用該樣式

background: theme.status.blackBg,

makestyles傳遞參數(makestyles props)

透過以下範例，將參數傳入makeStyle中，判斷isOpen為true時background顏色為'red'

// material-ui
import {makeStyle} from '@material-ui/core'

const useStyle = makeStyle({
	testWrap: props => ({
		backgound: props.isOpen && 'red'
	})
})

const TestComponents = () => {
	const classes = useStyle({isOpen: false})
	return (
		<div className={classes.testWrap}>
		</div>
	)
}

也可以利用三元運算子判斷要傳入的參數值

使用material-ui包

官方說明

使用material ui的icon功能，需先引入icon包