Material-UI에서 Style을 적용하는 방법

변명 중에서도 가장 어리석고 못난 변명은 "시간이 없어서"라는 변명이다. -에디슨-

잠깐의 2021년 회고

블로그를 작성하기전에 현재의 내가 느끼고 있는 것들의 대해서 잠시 얘기를 해보겠다.
나는 2달전에 부트캠프를 들어와서 현재 기업협업을 나와있다. 부트캠프에 다녔던 시간대에도 느꼈지만. 정말 기본기가 부족하다는걸 뼈저리게 느끼고 있다. 그런데 또 회사에서 요구하는 요구사항도 커버를 해야하기때문에 해보지 못했던 Typescript와 Next.js 그리고 Material-UI로 작업을 하고 있는데 쉽지가 않은 상황인 것 같다. 내가 아는건 한줌이고 배워야할 것은 산더미처럼 쌓여있는 상황...포기하고 싶다는 생각을 한건 아닌데 좀 지친다는 생각이 들긴 든다. 좀 제대로 하나라도 제대로 이해하고 로직을 짜보고 싶다. 포기하지말고 앞으로는 퇴근하고 남은 시간에 내 공부를 해봐야겠다.

아무튼 시작하기전에 얘기가 길었는데 오늘은 요즘 내가 쓰고 있는 Material-UI의 style을 쓰는 방법이 styled-component와 비슷하면서도 좀 달라서 블로그에 적어놓으면 좋을 것 같아서 이렇게 적어본다.

• 사용하고자 하는 기능을 제공하는 Material UI component를 import 한다.
• component를 삽입하고 지원하는 API를 통해 원하는 형태로 사용한다.

1. [Hooks API] makeStyles

React의 Hook처럼 classes 객체를 만들어서 사용할 수 있도록 도와준다.
사용자 정의 스타일을 적용할 수 있도록 makeStyles 를 사용하면 css 속성을 정의한 객체를 값으로 갖는다. css로 html 태그에 className을 먹이는 것과 비슷하다.

커스텀 스타일을 적용하려면 makeStyles hook으로 작성한 함수를 호출한 결과를 classes변수에 저장한다. 그리고 커스텀 스타일이 필요한 곳에 className prop의 값으로 classes 변수에 저장된 클래스 이름을 넘긴다.

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

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

export default function Home (){
    const classes = useStyles();
    return(
       <Box className={classes.home}>
           homepage 입니다.
       </Box>
    );
}

• 위코드와 같이 @material-ui/core/styles 에서 makeStyles 훅으로 작성한 함수의 결과를 const useStyles라는 변수에 명시하고

컴포넌트 내용안에 classes 라는 변수로 useStyles()를 사용한다. 즉, makeStyles안의 내용이 곧 css내용과 같다고 생각하면 된다.

• 그리고 스타일을 적용할 클래스 이름은 {classes.home}으로 객체로 사용한다. 즉 객체로 직접 컴포넌트에 css를 먹인다.

• 코드에서 네이밍은 굉장히 중요하기 때문에 (코드 컨벤션과 관련이 큼) 앞으로 makeStyles 를 사용할 때는 위와 같은 규칙을 적용하도록하자.

• 주로 이 방식을 많이 사용합니다.

2. [HOC API] withStyles

withStyles를 사용한 HOC형태로의 스타일링도 가능하다.
이 방법은 hook보다는 사용이 적습니다.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

[Conditional Rendering] Props

parent component에서 props를 받아 상태에 따른 조건 스타일링도 가능하다.

const useStyles = makeStyles({
  // style rule
  foo: props => ({
    backgroundColor: props.backgroundColor,
  }),
  bar: {
    // CSS property
    color: props => props.color,
  },
});

function MyComponent() {
  // Simulated props for the purpose of the example
  const props = { backgroundColor: 'black', color: 'white' };
  // Pass the props as the first argument of useStyles()
  const classes = useStyles(props);

  return <div className={`${classes.foo} ${classes.bar}`} />
}

새롭게 반환한 컴포넌트는 인자로 받는 컴포넌트와 크게 다르지 않다. 컴포넌트의 props에 styles에서 정의한 스타일 정보를 적용한 클래스들을 props.classes로 가진다는 점만 다르다. props.classes의 root에는 스타일이 적용된 클래스 이름이 저장되어 있다. 따라서 다음과 같이 Button 컴포넌트에 스타일이 적용된다.