スタイル付きコンポーネントを使用して合成コンポーネントをテーマ化するための好ましい方法は何ですか？

Question

テーマを指定する必要があるstyled-componentを作成する最良の方法をお勧めしますか？

私のコードはhttps://gist.github.com/aaronmcadam/7bfd63a6bc4cfc36f9947a449c6f494aです。

これは、styled-componentであるコンポーネントを構成するコンポーネントを持っています。

Avatar.styled.jsを<ThemeProvider>とすると、テーマを正常に上書きすることができます。

Avatar.withTheme.jsを使用した場合、テーマはwithThemeを使用した場合にのみ上書きできます。

このようなことをするのに好ましい方法はどれですか？公式ドキュメントから

Answer 1

：https://github.com/styled-components/styled-components/blob/master/docs/theming.md

私たちは、テーマ小道具を取るコンポーネントをエクスポートします。あなたは今までに（大きな部品の内部など）現在のテーマ外のスタイルのコンポーネント を取得する必要がある場合は、そこに提供 テーマは props.theme

を経由して、あなたのスタイル付きのコンポーネントに注入され、あなたはwithTheme高次 コンポーネントを使用することができます

import { withTheme } from 'styled-components' 

class MyComponent extends React.Component { 
    render() { 
    const { theme } = this.props 

    console.log('Current theme: ', theme); 
    // ... 
    } 
} 

export default withTheme(MyComponent)