[React] Material-ui 컴포넌트 사용 & 스타일 적용 (+예제코드)

• 기존에 /src/components에서 각각 component를 생성했다면
• component 생성된 녀석들을 가져와서 사용을 해보자

yarn add @material-ui/core

• material-ui/core를 설치
• components에 추가하면 아래와 같은 에러가 난다.

index.js:1 Warning: Failed prop type: The prop `children` is marked as required in `ForwardRef(Button)`, but its value is `undefined`.
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at Search.js:18)
    in div (created by styled.div)
    in styled.div (at Search.js:16)
    in Search (at AptComplexPage.js:12)
    in div (at AptComplexPage.js:9)
    in AptComplexPage (created by Context.Consumer)
    in Route (at App.js:19)
    in App (at src/index.js:41)
    in HelmetProvider (at src/index.js:40)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:39)
    in Provider (at src/index.js:38)

• 어이없게도 <Button> </Button> 사이에 값을 넣지 않았다... 값을 넣지 않으면 children undefined 에러가 생긴다

스타일 적용하기

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

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
}));


(...)
   const classes = useStyles();

  return (
    <div className={classes.root}>
      <div>
        <TextField
          id="standard-full-width"
          label="Label"
          style={{ margin: 8 }}
          placeholder="Placeholder"
          helperText="Full width!"
          fullWidth
          margin="normal"
          InputLabelProps={{
            shrink: true,
          }}
        />

• useStyles 각각의 tag별로 정의하고 root의 경우 <div>에 지정
• 나머지 textfield, button등에 스타일을 주면 적용이 된다.