React prop 값에 따라 Sass 변수를 사용하여 React 구성 요소 테마

Question

더 나은 해결 방법을 찾을 수 없습니다. 지금은보고 된 페이지 사용자에 따라 어떤 스타일을해야 모든 구성 요소에 theme 소품을 통과 들어

$colors: (
    dark: (
     theme1: #0096dc, 
     theme2: #eb8200, 
     … 
    ), 
    … 
); 

:

vars.scss : 나는 변수와 말대꾸-파일이 있습니다.

<div className={styles[`button${theme ? `-${theme}` : ``}`]}>{children}</div> 

을하고 말대꾸에서 내가 할 : 반작용에서 나는 다음과 같이 클래스 이름을 구축

@import 'vars'; 

.button{ 
    /* basic styles */ 
    font-size: 14px; 
    border: 1px solid; 

    @each $theme, $color in map-get($colors, dark) { 
     &-#{$theme} { 
      @extend .button; 
      border-color: $color; 
      color: $color; 
     } 
    } 
} 

하지만 이러한 코드를 내가에 따라 스타일 요소에 필요한 모든 시간을 배치해야하기 때문에이 절대적으로 불편 테마.

webpack에서 테마로 사용할 변수가있는 다른 파일을로드하는 방법에 대한 해결책이 있지만, redux에서 theme prop를 수신하므로 webpack은 해당 소품에 액세스 할 수 없습니다.

뿐만 아니라, 반응 성분에서 저음으로 속성을 전달하는 해결책을 찾을 수 없습니다. 맞은 편.

sass에서 가져 오기에서 변수를 사용할 방법이 없습니다. 아직 구현되지 않았습니다.

불행히도 현재 프로젝트에서 CSS-in-JS 방식을 사용할 수 없습니다.

더 나은 방법을 찾으려면 도와주세요.

Answer 1

나는 그것을 무국적 기능 구성 요소로 만들 것입니다.

function BrightBox(props){ 
    <div className={styles[`button${theme ? `-${theme}` : ``}`]}> 
    {props.children} 
    </div> 
} 

그런 다음 가져 와서 사용하십시오. 테마를 전달할 필요가 없습니다.

{user.notice ? 
    <BrightBox> 
    there are {user.notice.issues.size} outstanding issues! 
    </BrightBox> 
: null 
}