reactjs - 如何在 AppBar Title Material UI 中应用不同的颜色？

Question

我正在尝试为 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'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

如果您想在 Material ui 设计中更改 Appbar 背景....请尝试以下代码

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

或者如果您想应用 className，请按照此步骤操作

首先 make create const var

const style = {

    background : '#2E3B55';
};

<AppBar className={style}>