배포후 classname 리네임 되는 버그

🟠 문제상황

react-dropdown-select 라이브러리를 활용 구현된 드롭다운의 css 수정시 발견된 버그
className을 prop으로 받아서 사용중이다.
http://localhost:3000 에서 디자이너님의 요청상황에 맞게 적용한 css가 테스트 페이지 배포 후엔 UI가 적용되지 않음

⬇️

현재코드(간략히)

const CustomDropdown = () => {
	return (
    	<Select 
             className={`${props.dropDownClassName}`}
             placeholder={props.dropDownPlaceHolder}
        />
    )
}

export default CustomDropdown;

🟠 문제원인

className이 리네임 된다.

일반 SCSS(모듈 아님)에서는 props.dropDownClassName이 배포 시 CSS 최적화 도구(예: Webpack, Vite, CSS Minifier)에 의해 자동으로 리네임되거나 무시될 수 있다고 한다

• SCSS(모듈 아님): 전역 스타일로 사용되기 때문에 모든 className이 동일한 스코프에서 처리된다
• 리네임 현상: 빌드 도구가 CSS를 최적화하면서 클래스명이 축약되거나 변경된다.

🟠 해결방법

className을 고정적으로 설정하기

const CustomDropdown = () => {
	return (
    	<Select 
             className={`custom_dropdown ${props.dropDownClassName}`}
             placeholder={props.dropDownPlaceHolder}
        />
    )
}

export default CustomDropdown;

위와같이 해결했으나 이는 공동컴포넌트로서의 기능을 상실하는 듯해 아쉬움이 크다

✅ 방법 1(적용x): Module 사용

Module을 적용하지 않는다면, 최상단 App.tsx 컴포넌트에서 css, scss파일을 호출하게 된다. 이는 스타일들이 순서만 다르게 들어갈 뿐 스코프가 오염될 수 있다.

✅ 방법 2(적용x):

classnames 라이브러리 활용