スタイリッシュなコンポーネントの動的テーマ

Question

Reactアプリケーションでスタイリッシュなコンポーネントを使用していて、動的なテーマを使用したいと思っています。私の暗いテーマを使用する領域もあれば、光を使う領域もあります。スタイル付きコンポーネントは、使用されているコンポーネントの外で宣言する必要があるため、テーマを動的にどのように渡すのでしょうか？

Answer 1

これはまさにThemeProviderコンポーネントの目的です。彼らは機能を補間する際

あなたのスタイルのコンポーネントには、特別なtheme小道具へのアクセス権を持っている：

const Button = styled.button` 
    background: ${props => props.theme.primary}; 
` 

この<Button />コンポーネントは、今ThemeProviderによって定義されたテーマに動的に対応します。あなたはどのようにテーマを定義しますか？ ThemeProviderのtheme小道具に任意のオブジェクトを渡す：

const theme = { 
    primary: 'palevioletred', 
}; 

<ThemeProvider theme={theme}> 
    <Button>I'm now palevioletred!</Button> 
</ThemeProvider> 

我々は関係なく、それはまだよコンポーネントとThemeProviderの間でどのように多くのコンポーネントまたはDOMノードを意味しない、contextを経由して、あなたのスタイル付きのコンポーネントにテーマを提供まったく同じ仕事：

const theme = { 
    primary: 'palevioletred', 
}; 

<ThemeProvider theme={theme}> 
    <div> 
    <SidebarContainer> 
     <Sidebar> 
     <Button>I'm still palevioletred!</Button> 
     </Sidebar> 
    </SidebarContainer> 
    </div> 
</ThemeProvider> 

これはあなたが単一ThemeProviderにあなたの全体のアプリを包むことができることを意味し、あなたのスタイルのすべてのコンポーネントは、そのテーマを取得します。その1つのプロパティを動的に交換して、明るいテーマと暗いテーマを切り替えることができます。

あなたのアプリには、必要な数だけ、または多くの数のThemeProviderを置くことができます。ほとんどのアプリは唯一のアプリケーション全体をラップするものを必要としますが、あなたのアプリケーションの一部は、光をテーマとテーマにいくつかの他の部分が暗くなる持っているあなただけの異なるテーマを持つ2つのThemeProvider秒でそれらをラップします：

const darkTheme = { 
    primary: 'black', 
}; 

const lightTheme = { 
    primary: 'white', 
}; 

<div> 
    <ThemeProvider theme={lightTheme}> 
    <Main /> 
    </ThemeProvider> 

    <ThemeProvider theme={darkTheme}> 
    <Sidebar /> 
    </ThemeProvider> 
</div> 

Main内の任意のスタイル付きコンポーネントは、明るいテーマになり、Sidebar内の任意のスタイルのコンポーネントは、暗いテーマになります。アプリケーションのどの領域にレンダリングされているかに応じて適応します。そのために何もする必要はありません！

私はdocs about themingをチェックアウトすることをお勧めします。スタイリッシュなコンポーネントは非常に念頭に置いて作られています。

スタイリッシュなコンポーネントが存在する前のJSのスタイルの大きな苦境の1つは、以前のライブラリがスタイルのカプセル化とコロケーションを非常にうまく行ったが、適切なテーマサポートがなかったことでした。私たちが既存の図書館で持っていた他の苦労点についてもっと知りたい場合は、my talk at ReactNLでスタイリッシュな構成要素をリリースすることをお勧めします。 （注：スタイリッシュなコンポーネントの最初の外観は約25分で、驚かないでください）