[리액트]Material UI 컴포넌트에 Css Style 적용하기 - 나만의 컴포넌트 만들기

https://mui.com/styles/basics/

@mui/styles - MUI

 

meterial ui에서 제공해주는 styles api가 따로 있다.

먼저, 설치를 해준다.

npm install @mui/styles

 

react hook에서는 아래처럼 사용한다.

import * as React from 'react';
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';

const useStyles = makeStyles({
  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',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

const useStyles처럼 스타일 함수를 따로 생성할 수 있다.

 

makeStyles안에 root처럼, container gnb 등등 클래스의 이름 안에 객체 형식으로 css를 작성해주면 된다.

 

스타일을 생성했으면, 함수 안에서 변수에 useStyles함수를 호출하여 태그의 className에 적용시켜주면 원하는 디자인의 컴포넌트를 생성할 수 있다~