npm i @material-ui/core
// core 외에 system, utils, icons도 존재한다.
npm i styled-components
// index.js
import {StylesProvider} from "@material-ui/core";
ReactDOM.render(
<React.StrictMode>
<StylesProvider injectFirst>
<App />
</StylesProvider>
</React.StrictMode>,
document.getElementById("root")
);
보통 p, h1, h2 등으로 텍스트 정보를 렌더하겠지만 Material UI에서는 모든 텍스트는 \ 컴포넌트를 사용해서 표현한다
variant : 텍스트의 크기 지정
h1, h2, h3 .. body1, body2.. 이에 맞는 html 태그로 지정되기도 하는데, 크기와 별도로 다른 태그로 생성하고 싶다면 component 속성에 원하는 태그값을 넣는다
<Typography component="h1" variant="h4">Sample</Typography>
// 크기는 h4인 h1 태그가 생성됨
color : 글자색 지정. primary, secondary, textPrimary, textScondary ..
align : 수평 정렬. left, center, right
npm i @material-ui/icons
//예시
import EcoIcon from "@material-ui/icon/Eco
variant : 버튼 형태
color : variant에 맞는 요소에 색상 지정
disableElevation : 기본 그림자(돌출효과) 삭제
disableRipple : 버튼 클릭시 파동 효과 삭제
size : 버튼 크기.
startIcon, endIcon : 텍스트의 좌, 우에 아이콘을 넣고 싶을 때 해당 속성에 아이콘 컴포넌트 전달
텍스트가 없는 순수 아이콘 버튼은 Button대신 IconButton 사용
// 텍스트 o
<Button startIcon={<Icon/>}>Icon</Button>
// 텍스트 x
<IconButton>
<Icon/>
</IconButton>