개발하는데 다 이유가 있겠지

Paper 컴포넌트

---

<Paper> 컴포넌트는 포스트잇처럼 화면에서 도드라져 보이는 효과를 제공한다.
elevation, outlined 2가지 형태를 사용할 수 있다.

elevation : 영역이 약간 튀어나와 보이게 한다.
outlined : 테두리(윤곽선)이 보이게 한다.

import { Paper, Typography } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: theme.spacing(2),
  },
}));

export default () => {
  const classes = useStyles();

  return (
    <>
      <Paper elevation={3} className={classes.paper}>
        <Typography variant="h6" color="primary" gutterBottom>
          Plus
        </Typography>
        <Typography variant="body1">$3,000</Typography>
      </Paper>
      <br />
      <Paper variant="outlined" className={classes.paper}>
        <Typography variant="h6" color="secondary" gutterBottom>
          Minus
        </Typography>
        <Typography variant="body1">$2,400</Typography>
      </Paper>
    </>
  );
};

 

Card 컴포넌트

---

<Paper> 컴포넌트를 확장한 <Card> 컴포넌트는 여러 컴포넌트를 좀 더 형식에 맞춰서 묶어줄 때 사용한다.

<CardHeader> : 제목을 담기 위한 컴포넌트
<CardContent> : 내용을 담기 위한 컴포넌트
<CardActions> : 버튼을 담기 위한 컴포넌트

import {
  Button,
  Card,
  CardHeader,
  CardContent,
  CardActions,
  TextField,
  Typography,
} from "@material-ui/core";

export default () => (
  <Card elevation={5}>
    <CardHeader title="Title" />
    <CardContent>
      <Typography variant="body1" component="p">
        Please enter something. <br />
      </Typography>
      <TextField label="content" />
    </CardContent>
    <CardActions>
      <Button variant="contained" color="primary">
        button
      </Button>
    </CardActions>
  </Card>
);

 

 

[출처]
https://www.daleseo.com/?tag=MaterialUI