材料-UI：テーマ

Question

から抽出色は、私はそのようなコンポーネント内に私material-uiテーマから色を使用したい：

const MyComponent = props => (
    <UsersIcon color={currentTheme.primary1Color} /> 
) 

だから、私の必要性は、現在提供のテーマから値を抽出することです。

私は、現在のテーマを取得するためにコンテキストを使用して、このケースを解決するための実用的なソリューションを見つけました：

const MyComponent = (props, {muiTheme}) => (
    <UsersIcon color={muiTheme.palette.primary1Color} /> 
) 
contextTypes = { 
    muiTheme: PropTypes.object.isRequired, 
} 

Reactコンテキストはmaterial-uiで「フードの下」を使用するので、私の解決策は、将来の証拠ではありません - MUIの実装が変更される可能性があります。これを適切な（または推奨される）方法で解決する方法はありますか？

Answer 1

はい、あります。あなたの答えのための

import muiThemeable from 'material-ui/styles/muiThemeable'; 
const MyComponent = props => (
    <UsersIcon color={props.muiTheme.palette.primary1Color} /> 
) 
export default muiThemeable()(MyComponent) 

from material-ui docs

Answer 2

色が実行時に変更されない場合は、カスタムコンポーネントで使用されるだけでなく、テーマの初期化に使用されるグローバルオブジェクトにこれらの定数を保存することができます。これは、あなたのコードを乾燥させたまま、文脈に依存しないようにするでしょう。