React 구성 요소 라이브러리 + SASS 모듈성

Question

저는 React 구성 요소 라이브러리 개발을 시작했고 React가 아닌 다른 프로젝트와 공유한 일부 SCSS 코드를 재사용하고 싶었습니다.

이를 달성하기 위해 React 구성 요소에서 SASS 모듈을 사용해 보았습니다.

간단한 사용 사례는 잘 작동하지만 구성 요소 라이브러리를 만드는 중이고 버튼과 같은 특정 구성 요소에 대해 여러 스타일 조합이 필요합니다.

이제 Button 组件的问题。组件非常简单，但它有 3 个不同的 variant값을 만났습니다.

다음은 Button.tsx 파일입니다:

으아악

다음은 Button.module.scss 파일입니다:

으아악

제가 예상한 것은 <Buttonvariant="default">I'm green</Button>와 같은 컴포넌트를 사용하면 녹색 버튼이 있을 텐데, 제가 얻은 것은 회색 버튼이었습니다.

codesandbox에 대한 예시입니다

이 문제에 봉착했습니다. 소품 값에 따라 다양한 스타일을 적용하도록 도와줄 수 있는 사람이 있나요?

Answer 1

classnames npm 라이브러리를 사용해 보세요.

으아악

Answer 2

으아악