webentwicklung-frage-antwort-db.com.de

So wenden Sie eine andere Farbe in AppBar Title-Material an

Ich versuche, meine benutzerdefinierte Farbe für den AppBar-Header zu verwenden. Die AppBar hat den Titel "Meine AppBar". Ich verwende Weiß als Hauptfarbe. Es funktioniert gut für die Bar, aber der 'Titel' der AppBar verwendet auch dieselbe 'weiße' Farbe.

Hier ist mein 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;

Die Palettenstile überschreiben jedoch die Farbe der AppBar-Titel und es wird kein Titel angezeigt. Soll ich etwas hinzufügen oder habe ich etwas falsch eingefügt?

Und das ist meine Ausgabe:  enter image description here

14
Sijan Bhandari

Von dem, was ich in den Material-Ui-Quellen sehe, wird die Farbe der appBar-Titel von palette.alternateTextColor festgelegt. Wenn Sie es so zu Ihrer Stildefinition hinzufügen:

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

Sie sollten Ihren Titel sehen, ohne ihn manuell in jeder Komponente formatieren zu müssen.

Es gibt weitere Styling-Parameter für MuiTheme here

8
MadNat

Wenn Sie Ihren Appbar-Hintergrund im Material-UI-Design ändern möchten, versuchen Sie den folgenden Code

<AppBar style={{ background: '#2E3B55' }}>

oder wenn Sie className anwenden möchten, befolgen Sie diesen Schritt

als erstes make create const var

const style = {

    background : '#2E3B55';
};

<AppBar className={style}>
6
Neel Patel

Schließlich lernte ich titleStyle kennen, um Titel in AppBar zu gestalten.

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

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

Standardmäßig wird die KontrastText-Stütze (v3) der Palette verwendet:

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

Wenn Sie Ihren Stil erstellen:

const useStyles = makeStyles(theme => ({
  root: {
    boxShadow: "none",
    backgroundColor: "#cccccc" 
  } 
}));

verwenden Sie dann den obigen Stil in Ihrer Komponente:

const classes = useStyles();

<AppBar className={clsx(classes.root, className)} />
0
Wei