AppBar başlığındaki farklı renk nasıl uygulanır? Material-ui

Question

Özel rengimi AppBar üstbilgisi için kullanmaya çalışıyorum. AppBar 'Benim AppBar' başlığı vardır. Ana tema rengim olarak beyaz kullanıyorum. 'Başlığını: Bu '

import React from 'react'; 
import * as Colors from 'material-ui/styles/colors'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import AppBar from 'material-ui/AppBar'; 
import TextField from 'material-ui/TextField'; 

    const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: Colors.darkBlack, 
    primary1Color: Colors.white, 
    primary2Color: Colors.indigo700, 
    accent1Color: Colors.redA200, 
    pickerHeaderColor: Colors.darkBlack, 
    }, 
    appBar: { 
    height: 60, 
    }, 
}); 

class Main extends React.Component { 
    render() { 
    // MuiThemeProvider takes the theme as a property and passed it down the hierarchy 
    // using React's context feature. 
    return (
     <MuiThemeProvider muiTheme={muiTheme}> 
     <AppBar title="My AppBar"> 
     <div> 
    < TextField hintText = "username"/> 
    < TextField hintText = "password"/> 

    </div> 

     </AppBar> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default Main; 

Fakat, palet stilleri appbar geçersiz İşte

benim kodudur' da aynı 'beyaz' rengini kullanıyor çubuğun ama AppBar ait 'başlık' için iyi çalışır renk ve başlık görüntülenmiyor. Bir şey eklesem mi yoksa hiç yerim mi var?

Answer 1

Son olarak, AppBar içinde şekillendirme başlığı için titleStyle hakkında bilmek geldi:

Ve bu benim çıkıştır.

Ben maddi-ui kaynaklarda gördükleri itibaren

const titleStyles = { 
    title: { 
    cursor: 'pointer' 

    }, 
    color:{ 
    color: Colors.redA200 
    } 
}; 
<AppBar title={<span style={titleStyles.title}>Title</span>} titleStyle={titleStyles.color}> ............. 
</AppBar> 

Answer 2

, appbar başlık rengi palette.alternateTextColor tarafından ayarlanır. Eğer stil tanımınıza şu şekilde eklerseniz:

const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: Colors.darkBlack, 
    primary1Color: Colors.white, 
    primary2Color: Colors.indigo700, 
    accent1Color: Colors.redA200, 
    pickerHeaderColor: Colors.darkBlack, 
    alternateTextColor: Colors.redA200 
    }, 
    appBar: { 
    height: 60, 
    }, 
}); 

Başlığınızı, her bileşenin içinde elle çizmeye gerek kalmadan görmelisiniz.

daha fazla tarz parametreleri MuiTheme için vardır ihraç edilecek bu normal mi