Material UI

Material UI

2020/10/29 (新增連結)
2021/02/23 (新增連結)

Google Material Design

Material-UI

Material-UI是Google Material Design的react套件

Class component

Functional component (with Hooks)

  • Making a beautiful Todo App using React Hooks + Material UI (2018.10)

    • We’ll decompose the Todo App into 4 components:

      • Layout (user interface)

      • AddTodo (user interface)

      • TodoListItem (user interface)

      • TodoList (user interface)

      • ToDoApp

        • Layout

          • AddTodo

          • TodoList

            • TodoListItem

        • with customer React hooks 利用custom React hooks來進行state management

          • useInputValue

          • useTodos

    • Because we don’t want all these components to re-render unless it’s really necessary we’ll wrap them using memo helper from React.

  • Step by Step: Creating Todo App with React Hooks and Material UI

    • TodoApp

      • Layout

      • AddTodo

      • TodoList

        • Todo

      • with customer React hooks

        • useInputValue

        • useTodos

  • How to Build a Todo List with React Hooks

    • App

      • useTodoState (a customer React Hooks)

      • TodoForm

        • useInputState (a customer React Hooks)

        • connect to deleteTodo in useTodoState

      • TodoList (connect to addTodo in useTodoStae)

  • The True Beauty of Material-UI: Build responsive layouts for 2020 using Hooks and nested grids

    • React Setup and Material-UI Installation

    • Application Clean Up

    • Hooks, async/await, and API Data

      • with fetch

    • Material-UI Docs, Nested Grids, and Components

    • GridCeption

Grid

Table

TextField

益群提供的範例

這個範例用到了react router

學長用了一個自己寫的Theme.js，在Theme.js裡，使用了MuiThemeProvider。

/src/App.jsx

import React, { Component } from 'react';

import { renderRoutes } from 'react-router-config';

import theme from './theme';

import routes from './routes';


import Theme from '@e-group/react-material-components/dist/Theme';

import { BrowserRouter } from 'react-router-dom'


class App extends Component {

render() {

return (

<BrowserRouter>

<Theme theme={theme}>{renderRoutes(routes)}</Theme>

</BrowserRouter>

);

}

}


export default App;

/src/routes.js 設定路徑及對應的js component檔，主要的Component是Root，不同的path會開啟不同的component。

import Root from 'components/Root';


import Home from 'components/Home';

import Page1 from 'components/Page1';

import Page2 from 'components/Page2';

import NoFound from 'components/NoFound';


export default [

{

component: Root,

routes: [

{

path: '/',

exact: true,

component: Home

},

{

path: '/page1',

component: Page1

},

{

path: '/page2',

component: Page2

},

{

path: '*',

component: NoFound

}

]

}

];

/src/theme.js (利用createMuiTheme來更改預設的Theme)

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


const theme = createMuiTheme({

typography: {

useNextVariants: true,

fontFamily: [

'"Roboto"',

'"Helvetica"',

'"Arial"',

'sans-serif',

'"Microsoft JhengHei"'

].join(',')

}

});


// for develop

if (process.env.NODE_ENV !== 'production') console.log(theme);


export default theme;

/src/components/Root/Root.jsx

/src/components/Root/Root.jsx

import React from 'react'

import PropTypes from 'prop-types';

import ReactRouterPropTypes from 'react-router-prop-types';

import { renderRoutes } from 'react-router-config';

import { withStyles } from '@material-ui/core/styles';

import { Link } from 'react-router-dom'

import { AppBar, Toolbar, IconButton, Typography, Button } from '@material-ui/core'

import Container from '@e-group/react-material-components/dist/Container'

import MenuIcon from '@material-ui/icons/Menu';


const styles = theme => ({

root: {

display: 'flex',

height: '100%',

zIndex: 1,

position: 'relative'

},

grow: {

flexGrow: 1,

},

menuButton: {

marginLeft: -12,

marginRight: 20,

},

main: {

paddingTop: theme.spacing.unit * 12

}

});


const Root = ({ classes, route }) => {

return (

<div className={classes.root}>

<AppBar position="fixed">

<Toolbar>

<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">

<MenuIcon />

</IconButton>

<Typography variant="h6" color="inherit" className={classes.grow}>

News

</Typography>

<Button color="inherit">Login</Button>

</Toolbar>

</AppBar>

<Container maxWidth={false} className={classes.main}>

<nav>

<ul>

<li><Link to="/">home</Link></li>

<li><Link to="/page1">page1</Link></li>

<li><Link to="/page2">page2</Link></li>

</ul>

</nav>

{renderRoutes(route.routes)}

</Container>

</div>

)

}


Root.propTypes = {

// JSS props

classes: PropTypes.object.isRequired,

// react router dom props

route: ReactRouterPropTypes.route.isRequired

}


export default withStyles(styles)(Root)

/src/components/Home/Home.jsx

import React from 'react'


const Home = () => {

return (

<div>

Home

</div>

)

}


export default Home

Theme

  • Themes

    • 可以利用ThemeProvider來定義Theme，或者利用預設的Theme，但利用createMuiTheme來更改預設的Theme