React.js material-uiの導入と使い方
- 2019.12.09
- React
- material-ui, React

react.jsで利用できるマテリアルデザインのCSSフレームワークmaterial-uiを導入手順と簡単な使い方とテンプレートの利用方法を記載。
環境
- OS CentOS Linux release 8.0.1905 (Core)
- node V10.16.3
- npm 6.9.0
- React 16.12.0
material-uiインストール
下記のコマンドでインストールします。
1 |
npm install @material-ui/core |
material-uiを利用
Buttonを配置してみます。
src配下のApp.jsに下記のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React from 'react'; //追加 import Button from '@material-ui/core/Button'; import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> //追加 ここから <Button variant="contained" color="primary"> Hello World </Button> //追加 ここまで <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App; |
npm start で起動して、ブラウザから http://プライベートIP:3000 にアクセスすると material-ui を利用したbuttonが配置されています。

次に公式にあるテンプレートを利用してみます。
今回は「Sign-in side template」を利用してみます。
githubに上がっているコードをそのままApp.jsに貼り付けます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
import React from 'react'; import Avatar from '@material-ui/core/Avatar'; import Button from '@material-ui/core/Button'; import CssBaseline from '@material-ui/core/CssBaseline'; import TextField from '@material-ui/core/TextField'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Checkbox from '@material-ui/core/Checkbox'; import Link from '@material-ui/core/Link'; import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; import Typography from '@material-ui/core/Typography'; import { makeStyles } from '@material-ui/core/styles'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> {'Copyright © '} <Link color="inherit" href="https://material-ui.com/"> Your Website </Link>{' '} {new Date().getFullYear()} {'.'} </Typography> ); } const useStyles = makeStyles(theme => ({ root: { height: '100vh', }, image: { backgroundImage: 'url(https://source.unsplash.com/random)', backgroundRepeat: 'no-repeat', backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[50], backgroundSize: 'cover', backgroundPosition: 'center', }, paper: { margin: theme.spacing(8, 4), display: 'flex', flexDirection: 'column', alignItems: 'center', }, avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.secondary.main, }, form: { width: '100%', // Fix IE 11 issue. marginTop: theme.spacing(1), }, submit: { margin: theme.spacing(3, 0, 2), }, })); export default function SignInSide() { const classes = useStyles(); return ( <Grid container component="main" className={classes.root}> <CssBaseline /> <Grid item xs={false} sm={4} md={7} className={classes.image} /> <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square> <div className={classes.paper}> <Avatar className={classes.avatar}> <LockOutlinedIcon /> </Avatar> <Typography component="h1" variant="h5"> Sign in </Typography> <form className={classes.form} noValidate> <TextField variant="outlined" margin="normal" required fullWidth id="email" label="Email Address" name="email" autoComplete="email" autoFocus /> <TextField variant="outlined" margin="normal" required fullWidth name="password" label="Password" type="password" id="password" autoComplete="current-password" /> <FormControlLabel control={<Checkbox value="remember" color="primary" />} label="Remember me" /> <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} > Sign In </Button> <Grid container> <Grid item xs> <Link href="#" variant="body2"> Forgot password? </Link> </Grid> <Grid item> <Link href="#" variant="body2"> {"Don't have an account? Sign Up"} </Link> </Grid> </Grid> <Box mt={5}> <Copyright /> </Box> </form> </div> </Grid> </Grid> ); } |
下記のエラーが発生。
1 |
Module not found: Can't resolve '@material-ui/icons/LockOutlined' |
モジュールがないといっているのでインストールします。
1 |
npm install @material-ui/icons |
ブラウザから http://プライベートIP:3000 にアクセスするとテンプレートが利用できていることが確認できます。

-
前の記事
Ubuntu19.10 pythonでwebサーバーを起動する 2019.12.09
-
次の記事
Ubuntu19.10にhugoをインストールしてテンプレートを適応する 2019.12.10
コメントを書く