AppBar内のコンポーネントのデフォルトの色が一致しません

Question

ReactJS Webアプリケーションの場合、material-ui-next（ブランチ次の別名v1）を使用し始めています。 私は、AppBarの中に配置されたTypographyコンポーネントのデフォルトおよび予想色であったはずのものを設定するのにいくつかの困難を発見しました。

これはmaterial paletteと定義されており、インディゴを原色として選択すると、自動的にテキストの原色が白（#ffffff）に設定されます。これは公式material documentationからのインディゴパレットを見ても確認されています。

ただし、デフォルトの色は黒です。私はdefaultにcolorプロパティを設定した場合、それは黒いまま、それを操作できるようにする唯一の方法は、inheritにそれを設定することです。

どうすればよいですか？何か不足していますか？

私はalso seen thatをテーマにしており、textのプロパティもカスタマイズできます。 これは正しいのですか？そして、そうならば、どのように私はdefault|accent|error|primary|secondary|inheritが値としてタイポグラフィしか受け入れることができdocs statesあるため、例えばtext.primaryを使用することができますか？

同じ問題が同様にIconButtonで発生します。

以下、私のコードを見つけることができます。コンストラクタで私はパレットのカスタム値を設定し、render()にはMuiThemeProviderにテーマを渡します。

import React from 'react'; 
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; 
import { indigo, lightBlue, red } from 'material-ui/colors'; 
import AppBar from 'material-ui/AppBar/AppBar'; 
import Toolbar from 'material-ui/Toolbar/Toolbar'; 
import Typography from 'material-ui/Typography/Typography'; 
import IconButton from 'material-ui/IconButton'; 
import DeleteIcon from 'material-ui-icons/Delete'; 

class App extends React.Component { 
    constructor() { 
    super(); 

    const options = { 
     palette: { 
     primary: indigo, 
     secondary: lightBlue, 
     error: red, 
     }, 
    }; 

    this.theme = createMuiTheme(options); 
    } 

    render() { 
    return (
     <MuiThemeProvider theme={this.theme}> 
     <AppBar> 
      <Toolbar> 
      <Typography color="inherit"> 
       My App 
      </Typography> 
      <IconButton color="inherit" aria-label="Menu"> 
       <DeleteIcon /> 
      </IconButton> 
      </Toolbar> 
     </AppBar> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App; 

これは私のindex.jsファイルです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './material/App'; 

ReactDOM.render(<App />, document.getElementById('root')); 

事前にありがとうございます。

Answer 1

使用

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 


const muiTheme = getMuiTheme({ 
    palette: { 
    primary1Color: "#000000", //primary 
    accent1Color: "#741b1d", //seconday 
    } 
}); 

と

<MuiThemeProvider muiTheme={muiTheme}> 

も

palette: { 
    primary1Color: Colors.cyan500, 
    primary2Color: Colors.cyan700, 
    primary3Color: Colors.lightBlack, 
    accent1Color: Colors.pinkA200, 
    accent2Color: Colors.grey100, 
    accent3Color: Colors.grey500, 
    textColor: Colors.deepPurpleA700, 
    alternateTextColor: Colors.white, 
    canvasColor: Colors.white, 
    borderColor: Colors.grey300, 
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), 
    pickerHeaderColor: Colors.cyan500, 
    } 

Answer 2

これは、ビットしかめるですが、しかし、これは、可能になっている方法です。テーマはにありあなたのすべてのニーズをカバーするためにできるだけ完全なものにしてください。十分ではありません定義するだけで、プライマリとセカンダリの色は、あなたがそれ以外の場合はデフォルトを使用しようとしている、コンフィギュレーションのJSONオブジェクトが提供するすべての可能性を活用する必要があります。

少し詳しく説明しますが、入力コンポーネント（これまでのタイポグラフィの問題と同じように動作しますが、この例ではより完全です）を白いテキストと白い下線にすると、ラップするテーマを作成できますその後、

const options = { 
    palette: { 
    text: { 
     primary: grey[50], 
    }, 
    input: { 
     bottomLine: grey[50], 
     inputText: grey[50], 
    } 
    }, 
}; 

そして、このようにそれを使用します：その入力オブジェクトこのオプションを渡すことによって、部品

<MuiThemeProvider theme={createMuiTheme(options)}> 
    <Input 
     label="File name" 
     placeholder="Untitled-1" 
     required 
    /> 
    </MuiThemeProvider> 

または代わりに、スタイルを定義するには、公式ドキュメントのAPIセクションから入手でき、各コンポーネントのスタイルの構造を（悪用オブジェクト）、そして使用するwithStyles（）コンポーネントと同じです。

const styles = { 
    root: { 
     color: 'white', 
    }, 
    underline: { 
     '&:before': { 
     backgroundColor: 'white', 
     }, 
     '&:hover:not($disabled):before': { 
     backgroundColor: 'white', 
     height: 2, 
     }, 
    }, 
    }; 

そして、このようなスタイルを設定します。

<Input 
    classes={{ 
     root: classes.root, 
     underline: classes.underline, 
    }} 
    label="File name" 
    placeholder="Untitled-1" 
    required 
    /> 

はwithStyles（）コンポーネントとしてエクスポートすることを忘れないでください。

export default withStyles(styles)(FileName); 

おそらく最も速い方法がありますが、これはうまくいきました。