next.js 에서 scss적용하기(ft.MUI Material UI)

문제

Next에서 scss 사용하던 중, 자동으로 생성되는 mui클래스에 스타일 적용이 안됨

SCSS 

SCSS을 특정 파일에 미리 정의한 스타일을 적용하기 위해 classnames bind함수를 사용하였다. 

기본적으로 module.scss을 사용한다면 아래처럼 객체형으로 적용할 수 있다.

import styles from './PopoverStyle.module.scss';

<Popover 
	className={styles.pop-over} //not working (popOver is working)
	anchorEl={anchorEl}
>

하지만 class name이 camelCase가 아니면 오류가 발생한다. 그래서 classnames bind함수를 사용하였다. 

방법1

import styles from './PopoverStyle.module.scss';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

<Popover 
	className={cx('pop-over')}
	anchorEl={anchorEl}
>

방법 2 

classnames를 사용하지 않고 적용하는 방법(시도해보지는 않음)

import styles from './PopoverStyle.module.scss';

<Popover 
	className={styles["pop-over"]}
	anchorEl={anchorEl}
>

MUI 

mui의 Popover 'MuiPopover-paper'에 스타일링을 주고 싶었음

import {Popover} from '@mui/material';
import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

<Popover 
	className={cx('user-info-wrap')}
	anchorEl={anchorEl}
>
...
</Popover>

.user-info-wrap {
	.MuiPopover-paper {
    	background-color: red; //내가 적용시키고 싶은 부분
    }
}

Popover 정의 시 자동으로 도입되는 MuiPopover-paper에 스타일이 적용되지 않았다. 단순히 scss파일에 똑같은 class name으로 설정해 주면 된다고 생각했는데,,

해결

공식문서를 확인해 보니, Popover내부 구성요소의 스타일을 재정의하기 위해서는 Popover 컴포넌트에 classes속성으로 스타일을 적용해주어야 한다고 나와있었다. (Popover API: https://mui.com/material-ui/api/popover/)

Popover API - Material UI

즉, Popover 컴포넌트에

...

<Popover 
	className={cx('user-info-wrap')}
	anchorEl={anchorEl}
	classes={{paper: "MuiPopover-paper"}}
>
...

 

로 하면 되지만 나는 classnames bind기능을 적용하였기에

import classNames from 'classnames/bind';

const cx = classNames.bind(styles);

...

<Popover 
	className={cx('user-info-wrap')}
	anchorEl={anchorEl}
	classes={{paper: cx("MuiPopover-paper")}}
>
...

로 드디어 적용완료..! (styles ['user-info-wrap']을 미리 알았더라면 classnames를 굳이 안 썼을 텐데... 조건부 스타일링이 필요할 때만 classnames를 활용하는 걸로..)