如何在 AppBar Title MUI 中应用不同的颜色？

Question

我正在尝试将我的自定义颜色用于 AppBar 标头。 AppBar 的标题为“我的 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'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 ‘title’ 颜色并且没有标题显示。我应该包括一些东西还是我放错了任何东西？

这是我的输出：

原文由 Sijan Bhandari 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你想在 material ui 设计中改变你的 Appbar 背景….试试下面的代码

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

或者如果你想申请 className 然后按照这个步骤

首先 make create const var

 const style = {

    background : '#2E3B55';
};

<AppBar className={style}>

原文由 Neel Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议