React prop値に応じてsass変数を使用して反応するコンポーネントテーマ

Question

テーマ解決のためのより良い解決策が見つかりません。私は、ユーザーが閲覧しているページに応じて、いくつかのスタイルを持っている必要があり、すべてのコンポーネントにtheme小道具を渡す今の

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

：

vars.scss：私は、変数とSASSファイルを持っています。私は

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

とSASSで：

@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でテーマに応じて異なるファイルを読み込む方法がありますが、私はtheme propxをreduxから受け取ります。したがって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 
}