ऐपबार शीर्षक सामग्री में विभिन्न रंग कैसे लागू करें- ui

Question

मैं ऐपबार हेडर के लिए अपने कस्टम रंग का उपयोग करने की कोशिश कर रहा हूं। ऐपबार का शीर्षक 'माई ऐपबार' है। मैं अपने प्राथमिक विषय रंग के रूप में सफेद का उपयोग कर रहा हूँ। यह बार लेकिन AppBar की 'शीर्षक' के लिए अच्छी तरह से काम भी एक ही 'सफेद' रंग उपयोग कर रहा है '

यहाँ मेरी कोड है:

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; 

लेकिन, पैलेट शैलियों AppBar ओवरराइड' शीर्षक ' रंग और कोई शीर्षक प्रदर्शित नहीं हो रहा है। क्या मुझे कुछ शामिल करना चाहिए या मैंने किसी को गलत जगह दी है?

Answer 1

अंत में, मैं AppBar में स्टाइल खिताब के लिए titleStyle बारे में पता चला:

और ये मेरे उत्पादन होता है।

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

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

Answer 2

मैं क्या सामग्री-ui स्रोतों में देख से, AppBar शीर्षक रंग palette.alternateTextColor द्वारा निर्धारित है। यदि आप इसे अपनी स्टाइल परिभाषा में जोड़ते हैं जैसे:

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, 
    }, 
}); 

आपको प्रत्येक घटक के अंदर मैन्युअल रूप से स्टाइल करने की आवश्यकता के बिना अपना शीर्षक देखना चाहिए।

वहाँ MuiTheme के लिए और अधिक स्टाइल मापदंड हैं वर्णित here