Как применить различный цвет в материале заголовка AppBar-ui

Я пытаюсь использовать свой собственный цвет для заголовка AppBar. В AppBar есть заголовок "My AppBar". Я использую белый цвет как основной цвет темы. Он хорошо работает для бара, но "название" 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 context feature.
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <AppBar title="My AppBar">
       <div>
   < TextField hintText = "username" / >
    < TextField hintText = "password" / >

    </div>

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

export default Main;

Но стили палитры переопределяют цвет заголовка AppBar и не отображаются названия. Должен ли я включить что-то или я упустил какой-либо из них?

И это мой вывод:

Ответ 1

Из того, что я вижу в материалах-источниках, цвет заголовка appBar задается палитрой .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 более подробно описаны параметры стиля здесь

Ответ 2

Если вы хотите изменить свой фон Appbar в дизайне пользовательского интерфейса материала... попробуйте следующий код

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

или если вы хотите применить className, выполните этот шаг

в первую очередь make create const var

const style = {

    background : '#2E3B55';
};

<AppBar className={style}>

Ответ 3

Наконец, я узнал о titleStyle для названия стиля в AppBar.

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

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

Ответ 4

По умолчанию используется палитра контрастный текст (v3):

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

Ответ 5

Когда вы создаете свой стиль:

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

затем используйте вышеуказанный стиль в своем компоненте:

const classes = useStyles();

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

Ответ 6

Вы можете добавить этот код в свой код

<AppBar title="My AppBar" style={{ backgroundColor: '#2196F3' }} >

или если ваш CSS

import './home.css';

вставьте это в свой код

.title {
text-align: left;
background-color: black !important;}

Надеюсь помочь.