2021-04-24 :: Material UI

시작하기

터미널을 통해 아래 코드를 실행시켜 ui/core을 설치 해준다.

npm install @material-ui/core
npm install @material-ui/icons

Material-UI의 기본 폰트인 Roboto를 import 해준다.

기본 html폴더에 폰트 등록하기 public/index/html에 폰트를 등록 해주자.

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

Basic Component

Typograph

text를 추가할 때 사용하는 컴포넌트이다.

<Typograhph variant="h1" aloign="center" color="textPrimary" gutterBootm>Hello, World!</Typograhph>

Grid - 반응형

cssbaseline -> give default css 

 

@material에서 Icon도 많이 사용 가능

<Appbar>

<main>

 

gutterBottom

paragraph

 

메인홈페이지

component -> example of deoms, explaination

component API -> props에 대한 정보

 

먼저 Component section에서

 

Styles

스타일은 아래와 같이 컴포넌트의 props에 인라인으로 적용할 수있다.

<Container maxWidth="sm" style={{marginTop: '100px'}}></Container>

makeStyles이라는 훅을 통해 스타일을 관리할 수도 있다. 컴포넌트에 대한 스타일을 따로 파일로 만들어 관리하면 더욱 효율적으로 관리할 수 있다.

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

const useStyles = makeStyles(() => ({
   container: {
      backgroundColor: theme.palette.background.paper,
      padding: '20px',
   }
}));

const classes = useStyles();

 

<div className={classes.container}></div>