Material UI for react

Updated: July 18, 2021

1.설치

Material UI official site

$ yarn add @material-ui/core

2.Button

Material UI Button

button 에 variant 설정후에 색 설정 클릭 시 alert 메세지창 뜨기

// in App.js

// import Button
import Button from "@material-ui/core/Button";

function App() {
  return (
    <div className="App">
      <Button
        variant="contained"
        color="secondary"
        onClick={() => alert("hello")}
      >
        Hello world!
      </Button>
    </div>
  );
}

링크 버튼 만들기

function App() {
  return (
    <div className="App">
      <Button href="https://naver.com" variant="contained" color="secondary">
        Hello world!
      </Button>
    </div>
  );
}

버튼 사이즈 조정

function App() {
  return (
    <div className="App">
      <Button
        size="small" // medium, large 있음
        variant="contained"
        color="secondary"
      >
        Hello world!
      </Button>
    </div>
  );
}

disable 버튼 (클릭이 안되게끔 만들기)

function App() {
  return (
    <div className="App">
      <Button size="small" disabled variant="contained" color="secondary">
        Hello world!
      </Button>
    </div>
  );
}

버튼에 개별적인 css 적용하기 (폰트사이즈 20 적용하기)

function App() {
  return (
    <div className="App">
      <Button
        size="small"
        style=
        disabled
        variant="contained"
        color="secondary"
      >
        Hello world!
      </Button>
    </div>
  );
}

버튼에 icon 추가 하기
- icon material 설치
```
$ yarn add @material-ui/icons
```

// import saveIcon

import SaveIcon from "@material-ui/icons/Save";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Button
          startIcon={<SaveIcon />} // 버튼 시작지점에 아이콘 넣기
          endIcon={<SaveIcon />} // 버큰 끝나는 지점에 아이콘 넣기
          size="large"
          variant="contained"
          color="secondary"
        >
          Hello world!
        </Button>
      </header>
    </div>
  );
}

버튼 그룹 만들기 (공통되는 사항이 있으면 그룹핑해주는것)

// import ButtonGroup
import { ButtonGroup } from "@material-ui/core";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ButtonGroup variant="contained" color="primary" size="large">
          <Button startIcon={<SaveIcon />}>Save</Button>
          <Button startIcon={<DeleteIcon />}>Discard</Button>
        </ButtonGroup>
      </header>
    </div>
  );
}

3.CheckBox

sample checkbox 만들기

import Checkbox from "@material-ui/core/Checkbox";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <CheckboxExample></CheckboxExample> // check box example component 연결
        <ButtonGroup variant="contained" color="primary" size="large">
          <Button startIcon={<SaveIcon />}>Save</Button>
          <Button startIcon={<DeleteIcon />}>Discard</Button>
        </ButtonGroup>
      </header>
    </div>
  );
}

function CheckboxExample() {
  const [checked, setChecked] = React.useState(true);
  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        color="primary" //
        disabled // checkbox disable
      />
    </div>
  );
}

// FormControlLabel import
import FormControlLabel from "@material-ui/core/FormControlLabel";

function CheckboxExample() {
  const [checked, setChecked] = React.useState(true);
  return (
    <div>
      <FormControlLabel //  label 을 클릭하게 되면 checkbox 도 자동으로 클릭하게 만듬
        control={
          <Checkbox
            checked={checked}
            onChange={(e) => setChecked(e.target.checked)}
            color="primary"
            inputProps=aria-label
          />
        }
        label="Testing Checkbox"
      />
    </div>
  );
}

4.Text Field

일반 text box

// import TextField
import  TextField  from '@material-ui/core/TextField';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TextField
          variant="outlined"
          color="secondary"
        />

Date

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TextField
          variant="outlined"
          color="secondary"
          type="date"
        />

Time

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TextField
          variant="outlined"
          color="secondary"
          type="time"
        />

Time label

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TextField
          variant="filled"
          color="secondary"
          type="time"
          label= "The Time"
        />

Email

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TextField
          variant="filled"
          color="secondary"
          type="email"
          label="Your email"
          placeholder="test@test.com"
        />

5.makeStyles for Buttons

// import makeStyles

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

const useStyles = makeStyles({
  root: {
    background: '#FF8E53',
    border: 0,
    marginBottom: 15,
    borderRadius: 15,
    color: 'white',
    padding: '10px 30px'
  }
})

function ButtonStyled() {
  const classes = useStyles();
  return <Button className={classes.root}>Test Styled Button</Button>
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ButtonStyled />

6.Themes with ThemeProvider

// import ThemProvider and colors

import {
  makeStyles,
  ThemeProvider,
  createMuiTheme,
} from "@material-ui/core/styles";
import { green, orange } from "@material-ui/core/colors";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: green[500],
    },
    secondary: {
      main: orange[500],
    },
  },
});

function App() {
  return (
    // return 전체 부분을 ThemProvider tag 로 묶어 줘서 전체 Primary, secondary color 를 변경해서 사용할 수 있음
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
          <ButtonStyled />
          <TextField
            variant="filled"
            color="secondary"
            type="email"
            label="Your email"
            placeholder="test@test.com"
          />
          <CheckboxExample />
          <ButtonGroup variant="contained" color="primary" size="large">
            <Button startIcon={<SaveIcon />}>Save</Button>
            <Button startIcon={<DeleteIcon />}>Discard</Button>
          </ButtonGroup>
        </header>
      </div>
    </ThemeProvider>
  );
}

7.Typography

roboto font 적용

$ yarn add fontsource-roboto

// import roboto font and Typography

import 'fontsource-roboto'
import  Typography  from '@material-ui/core/Typography';


const theme = createMuiTheme({
  // 폰트사이즈 세부 설정
  typography: {
    h2: {
      fontSize: 36,
      marginBottom: 15,
    }
  },
  palette: {
    primary: {
      main: green[500],
    },
    secondary: {
      main: orange[500],
    }
  }
})


function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
        // h2, subtitle, body 등 variant 를 통해 tag 설정 하고, component 에서 추가 tag 설정 가능
          <Typography variant="h2" component="div">
            Welcome to TestPage
          </Typography>
          <Typography variant="subtitle1">
            Learn how to use Material Ui
          </Typography>

8.Containers and Grids

import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <ThemeProvider theme={theme}>
      // Container 설정
      <Container maxWidth="xs">
        <div className="App">
          <header className="App-header">
            <Grid container spacing={2} justify="center">
              <Grid item>
                <Paper style= />
              </Grid>
              <Grid item>
                <Paper style= />
              </Grid>
              <Grid item>
                <Paper style= />
              </Grid>
            </Grid>
          </header>
        </div>
      </Container>
    </ThemeProvider>
  );
}

9.Responsive Design

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="xs">
      <div className="App">
        <header className="App-header">
          <Grid container spacing={2} justify="center">
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width:'100%',} }/>
            </Grid>
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width: '100%',} }/>
            </Grid>
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width:'100%',} }/>
            </Grid>
          </Grid>

10.App Bar

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="xs">
      <div className="App">
        <header className="App-header">

          <AppBar color="secondary">
            <Toolbar>
              <IconButton>
                <MenuIcon />
              </IconButton>
              <Typography variant="h6">
                Test Page
              </Typography>
              <Button>
                Login
              </Button>
            </Toolbar>
          </AppBar>

Example whole code

// in App.js

import React from 'react'
import './App.css';

import Button from '@material-ui/core/Button';
import { ButtonGroup } from '@material-ui/core';
import SaveIcon from '@material-ui/icons/Save';
import DeleteIcon from '@material-ui/icons/Delete'
import Checkbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel'

import { makeStyles, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { green, orange } from '@material-ui/core/colors';
import 'fontsource-roboto'

import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';

import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu'



const useStyles = makeStyles({
  root: {
    background: '#FF8E53',
    border: 0,
    marginBottom: 15,
    borderRadius: 15,
    color: 'white',
    padding: '10px 30px'
  }
})

const theme = createMuiTheme({
  typography: {
    h2: {
      fontSize: 36,
      marginBottom: 15,
    }
  },
  palette: {
    primary: {
      main: green[500],
    },
    secondary: {
      main: orange[500],
    }
  }
})



function ButtonStyled() {
  const classes = useStyles();
  return <Button className={classes.root}>Test Styled Button</Button>
}


function App() {
  return (
    <ThemeProvider theme={theme}>
      <Container maxWidth="xs">
      <div className="App">
        <header className="App-header">

          <AppBar color="secondary">
            <Toolbar>
              <IconButton>
                <MenuIcon />
              </IconButton>
              <Typography variant="h6">
                Test Page
              </Typography>
              <Button>
                Login
              </Button>
            </Toolbar>
          </AppBar>
    
          <Typography variant="h2" component="div">
            Welcome to TestPage
          </Typography>
          <Typography variant="subtitle1">
            Learn how to use Material Ui
          </Typography>
          <ButtonStyled />
          
          <Grid container spacing={2} justify="center">
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width:'100%',} }/>
            </Grid>
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width: '100%',} }/>
            </Grid>
            <Grid item xs={3} sm={6}>
              <Paper style={ {height: 75, width:'100%',} }/>
            </Grid>
          </Grid>

          <CheckboxExample />
          <ButtonGroup variant="contained" color="primary" size="large">
            <Button
              startIcon={<SaveIcon />}>
                Save
            </Button>
            <Button
              startIcon={<DeleteIcon />}>
                Discard
            </Button>
          </ButtonGroup>
        </header>
      </div>
      </Container>
    </ThemeProvider>
  );
}


function CheckboxExample() {
  const [checked, setChecked] = React.useState(true)
  return (
    <div>
      <FormControlLabel  //  label 을 클릭하게 되면 checkbox 도 자동으로 클릭하게 만듬
        control={<Checkbox
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
        color='primary'
        inputProps=aria-label
        />}
        label= "Testing Checkbox"
      />
    </div>
  )
}

export default App;

🔶 🔷 📌 🔑

Reference

Material UI official site - https://material-ui.com
Material UI React Tutorial from Traversy Media - https://www.youtube.com/watch?v=vyJU9efvUtQ

Share on

Twitter Facebook LinkedIn

Jacob Ko

Material UI for react

1.설치

2.Button

3.CheckBox

4.Text Field

일반 text box

Date

Time

Time label

Email

5.makeStyles for Buttons

6.Themes with ThemeProvider

7.Typography

8.Containers and Grids

9.Responsive Design

10.App Bar

Example whole code

Reference

Share on

Leave a comment

You may also enjoy

07.Authentication in SwiftUI

06.Connect Firebase to Xcode in SwiftUI

TCA Architecture in SwiftUI

UICollectionView