1
npm install @mui/material @emotion/react @emotion/styled # 기본 설치
2
npm install @mui/icons-material # Icons

1
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
2
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

1
// Webpack CSS import
2
// import 'onsenui/css/onsenui.css';
3
// import 'onsenui/css/onsen-css-components.css';
4
// import OnesenUIExample from './components/OnsenUI/OnesenUIExample';
5
// import AntDesignExample from './components/AntDesign/AntDesignExample';
6
// import 'semantic-ui-css/semantic.min.css';
7
// import ReactSemanticUIExample from './components/ReactSemanticUI/ReactSemanticUIExample';
8
// import 'bootstrap/dist/css/bootstrap.min.css';
9
// import ReactBootstrapExample from './components/ReactBootstrap/ReactBootstrapExample';
10
import MaterialUIExample from './components/MaterialUI/MaterialUIExample'
11

12
export default function App() {
13
  return (
14
    <>
15
      <MaterialUIExample />
16
      {/* <ReactBootstrapExample /> */}
17
      {/* <ReactSemanticUIExample /> */}
18
      {/* <AntDesignExample /> */}
19
      {/* <OnesenUIExample /> */}
20
    </>
21
  )
22
}

1
import Button from '@mui/material/Button'
2

3
export default function ButtonExample() {
4
  return <Button variant="contained">Hello World</Button>
5
}

1
import ButtonExample from './ButtonExample'
2

3
export default function MaterialUIExample() {
4
  return (
5
    <div>
6
      <ButtonExample />
7
    </div>
8
  )
9
}

1
import * as React from 'react'
2
import { styled } from '@mui/material/styles'
3
import Box from '@mui/material/Box'
4
import Paper from '@mui/material/Paper'
5
import Grid from '@mui/material/Grid'
6

7
const Item = styled(Paper)(({ theme }) => ({
8
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
9
  ...theme.typography.body2,
10
  padding: theme.spacing(1),
11
  textAlign: 'center',
12
  color: theme.palette.text.secondary,
13
}))
14

15
export default function BasicGrid() {
16
  return (
17
    <Box sx={{ flexGrow: 1 }}>
18
      <Grid container spacing={2}>
19
        <Grid item xs={8}>
20
          <Item>xs=8</Item>
21
        </Grid>
22
        <Grid item xs={4}>
23
          <Item>xs=4</Item>
24
        </Grid>
25
        <Grid item xs={4}>
26
          <Item>xs=4</Item>
27
        </Grid>
28
        <Grid item xs={8}>
29
          <Item>xs=8</Item>
30
        </Grid>
31
      </Grid>
32
    </Box>
33
  )
34
}