web-dev-qa-db-fra.com

Comment appliquer une couleur différente dans AppBar Title material-ui

J'essaie d'utiliser ma couleur personnalisée pour l'en-tête AppBar. La barre d’application porte le titre «Ma barre d’application». J'utilise le blanc comme couleur principale de mon thème. Cela fonctionne bien pour le bar, mais le "titre" de la barre d’application utilise également la même "couleur" blanche.

Voici mon code:

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;

Toutefois, les styles de palette remplacent la couleur du titre de la barre d’application et aucun titre ne s’affiche. Devrais-je inclure quelque chose ou j'en ai égaré?

Et voici ma sortie:  enter image description here

reactjsmaterial-ui
14
Sijan Bhandari

D'après ce que je vois dans les sources material-ui, la couleur du titre d'appBar est définie par palette.alternateTextColor. Si vous l'ajoutez à votre définition de style comme ceci:

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

Vous devriez voir votre titre sans avoir besoin de le styler manuellement dans chaque composant.

MuiTheme décrit davantage de paramètres de style ici

8
MadNat

Enfin, j'ai appris à connaître titleStyle pour le style de titre dans AppBar.

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

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

Par défaut, il utilise la propriété contrastText prop de la palette (v3):

const theme = createMuiTheme({
  palette: {
    primary: {
      contrastText: 'rgba(0,0,0,0.8)'
    }
  },
});
1
Alexander Danilov