材料-UI：タブ

Question

内部SVGアイコンの色を設定できません）（レンダリング反応クラス内下記あり：それは以下の動作に対し

import {blue900} from 'material-ui/styles/colors'; 
import {Tabs, Tab} from 'material-ui/Tabs'; 
import SocialPeople from 'material-ui/svg-icons/social/people'; 

var myClass = React.createClass({ 
    render: function() { 
    return (
     <Tabs> 
     <Tab icon={<SocialPeople color={blue900} />}/> 
     </Tabs> 
    ); 
    } 
}); 

SVGアイコンの色は、上記無視される：

var myClass = React.createClass({ 
    render: function() { 
    return (
     <SocialPeople color={blue900} /> 
    ); 
    } 
}); 

誰でもこれを説明できますか？ タブの要素内でアイコンの色を設定するにはどうすればよいですか？

Answer 1

ライブラリを変更せずに現時点では不可能なようです。私はそれがバグだと信じています。私はこれに対する解決策を見つけるのに苦労しました。それでは、コードを見てきました。

私が知ったのは、アイコン要素がTabコンポーネントに渡されると、渡されたスタイルを含めてTabコンポーネントの小道具が変更されたことです。それで、それはアイコンのコピーを作成しますが、異なる小道具やスタイルを使ってレンダリングします。

if (icon && React.isValidElement(icon)) { 
    const iconProps = { 
    style: { 
     fontSize: 24, 
     color: styles.root.color, 
     marginBottom: label ? 5 : 0, 
    }, 
    }; 
    if (icon.type.muiName !== 'FontIcon') { 
    iconProps.color = styles.root.color; 
    } 
    iconElement = React.cloneElement(icon, iconProps); 
} 

送信する色は無視され、MuiThemeの色がかかります。

https://github.com/callemall/material-ui/blob/master/src/Tabs/Tab.js

コードを見てください。 5行目から25行目および110から126行目。

したがって、色を取得するにはライブラリを変更する必要があります。ちょうど..

1. オープン次の手順を実行し、ファイルnode_modules /材料-UI /タブ/ Tab.js
2. ゴー

iconProps.color = styles.root.color

とに置き換えるを読み込み、128行にこの

if (icon.props) { 
     if (icon.props.style && icon.props.style.color) { 
     iconProps.color = icon.props.style.color; 
     } else if (icon.props.color) { 
     iconProps.color = icon.props.color; 
     } else { 
     iconProps.color = styles.root.color; 
     } 

     if (icon.props.hoverColor) { 
     iconProps.hoverColor = icon.props.hoverColor; 
     } 
    } 

これは.. ..あなたのアイコン要素は何かになるはずですこの

<SocialPeople style={{ color: 'red' }} />