MakeStyle 이 뭘까

Material UI 에서 제공하는 기본적인 컴포넌트가 있지만 완벽하게 가져다 쓰는 경우는 거의 없다.

사용자의 입맛에 따라 커스텀을 하는 경우가 많다.

 

 

그럼 사용자의 스타일을 적용하는 방법에 대해서 알아보자.

 

 

 

 

makeStyles Hook

Material UI는 직관적으로 사용자 정의 스타일을 적용할 수 있도록 makeStyles React hook을 제공합니다. makeStyles는 @material-ui/core/styles 패키지에서 import 할 수 있으며, 인자로 커스텀 스타일 객체를 받습니다. 커스텀 스타일 객체의 클래스 이름을 키로 갖고 해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖습니다.

 

 

 

 

 

이것도 결국은 훅이구나...

 

 

 

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";

const useStyles = makeStyles({
  text: {
    color: "white",
    backgroundColor: "black",
  },
});

export default function () {
  const classes = useStyles();
  return <Typography className={classes.text}>Test</Typography>;
}

 

커스텀 스타일을 사용하려면 makeStyles hook으로 작성한 함수를 호출한 결과를 classes 변수에 저정합니다. 그 다음 커스텀 스타일이 필요한 곳에 className prop의 값으로 classes 변수에 저정된 클래스 이름을 넘겨줍니다.

 

 

 

 

 

 

 

 

 

 

스타일 적용 예제

Material UI를 사용해서 가격 정보를 보여주는 실습용 React UI를 작성해보겠습니다.

먼저 앱의 최상위 컴포넌트 파일에 <CssBaseline/> 컴포넌트를 추가해줍니다. 그리고 <Box/> 컴포넌트를 이용해서 <Container/> 컴포넌트 주변에 약간의 padding을 주었습니다.

 

 

import React from "react";
import { CssBaseline, Box, Container } from "@material-ui/core";

import PricingCard from "./PricingCard";

export default function () {
  return (
    <>
      <CssBaseline />
      <Box clone p={5}>
        <Container maxWidth="xs">
          <PricingCard />
        </Container>
      </Box>
    </>
  );
}

 

 

 

 

 

 

다음으로 styles.js 파일을 생성하고, 그 안에 makeStyles hook을 이용해서 3개의 클래스에 대한 커스텀 스타일을 작성합니다.

 

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

export const useStyles = makeStyles({
  header: {
    backgroundColor: "#EEE",
  },
  pricing: {
    display: "flex",
    justifyContent: "center",
    alignItems: "baseline",
    marginBottom: "16px",
  },
  descriptions: {
    margin: 0,
    padding: 0,
    listStyle: "none",
  },
});

 

 

 

 

 

 

 

마지막으로 Material UI의 여러가지 컴포넌트를 이용해서 <PricingCard/> 컴포넌트를 작성합니다. 위에서 작성한 useStyles hook을 임포트한 후 커스텀 스타일이 필요한 곳에 적용해줍니다.

 

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

import { useStyles } from "./styles";

export default function () {
  const classes = useStyles();
  return (
    <Card>
      <CardHeader
        title="Free"
        titleTypographyProps={{ align: "center" }}
        className={classes.header}
      />
      <CardContent>
        <div className={classes.pricing}>
          <Typography variant="h3" color="textPrimary">
            $0
          </Typography>
          <Typography variant="h6" color="textSecondary">
            /mo
          </Typography>
        </div>
        <ul className={classes.descriptions}>
          {["2 GB of storage", "Help center access", "Email support"].map(
            (line) => (
              <Typography
                component="li"
                variant="subtitle1"
                align="center"
                key={line}
              >
                {line}
              </Typography>
            )
          )}
        </ul>
      </CardContent>
      <CardActions>
        <Button fullWidth variant="contained" color="primary">
          Sign up for free
        </Button>
      </CardActions>
    </Card>
  );
}

 

 

 

 

 

 

 

이 포스팅은 아래 블로그를 참고하였습니다.

https://www.daleseo.com/material-ui-styles/

Material UI 스타일링