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

Posted 2023-02-22

【中文标题】如何在 AppBar Title MUI 中应用不同的颜色？

【英文标题】：How to apply different color in AppBar Title MUI?

【发布时间】：2017-01-01 11:29:06

【问题描述】：

我正在尝试为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' 颜色并且没有标题显示。我应该包括一些东西还是我放错了任何东西？

这是我的输出：

【参考方案1】：

最后，我知道了在 AppBar 中设置标题样式的 titleStyle。

const titleStyles = 
  title: 
    cursor: 'pointer'

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

【参考方案2】：

根据我在 material-ui 源代码中看到的，appBar 标题颜色由palette.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 描述了更多样式参数here

【讨论】：

它应该被导出吗？我在导入之后在 App.js 中创建了一个类似的东西，并且没有改变颜色。

啊，成功了，我忘了在<MuiThemeProvider/> 中添加muiTheme=muiTheme

【参考方案3】：

默认情况下它使用调色板的 contrastText 属性（v3）：

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

【参考方案4】：

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

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

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

首先make create const var

const style = 

    background : '#2E3B55';
;

<AppBar className=style>

【参考方案5】：

使用 makeStyles() 创建您的样式：

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

在您的组件中使用上述样式：

const classes = useStyles();

<AppBar className=classes.root />

【参考方案6】：

您可以在代码中添加此代码

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

或者如果你的 CSS

import './home.css';

把它放到你的代码中

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

希望能提供帮助。

【参考方案7】：

首先，将 const 添加到文件中。然后应用到你需要的线路，如下所示。

const styles =  button:  margin: 15,, appBarBackground: background : '#2E3B55' ;

然后将其添加到如下所示的行中

 style=styles.button
 style=styles.appBarBackground

【参考方案8】：

请先制作theme.js。

- theme.js
import  red  from '@material-ui/core/colors';
import  createMuiTheme  from '@material-ui/core/styles';

export default createMuiTheme(
  palette: 
    primary: 
      main: '#556cd6',
    ,
    secondary: 
      main: '#19857b',
    ,
    error: 
      main: red.A400,
    ,
    background: 
      default: '#fff',
    ,
  ,
);

将这些行添加到 index.js

import  ThemeProvider  from '@material-ui/core/styles'
import theme from './theme'

ReactDOM.render(
  <ThemeProvider theme=theme>
    <App />    
  </ThemeProvider>,
  document.getElementById('root')
);

<AppBar position='static' color='secondary' elevation=2>
  ...
</AppBar>

***重要***

secondary: 
  main: '#19857b',
,

color='secondary'

【参考方案9】：

MUI v5更新

1。使用sxprop

<AppBar sx= bgcolor: "green" >

2。在Palette 中设置primary.main 颜色

Appbar 背景颜色默认使用主题提供的原色。

const theme = createTheme(
  palette: 
    primary: 
      main: "#00ff00"
    
  
);

3。在styleOverrides 中设置AppBar 默认样式

如果您不想触碰primary.main 值并可能影响其他组件，请使用此选项：

const theme = createTheme(
  components: 
    MuiAppBar: 
      styleOverrides: 
        colorPrimary: 
          backgroundColor: "red"
        
      
    
  
);

【参考方案10】：

处理@NearHuscarl 的答案。如果您希望无论您使用哪种应用栏颜色都应用样式：例如<Appbar color="secondary" 或 <Appbar color="primary"。您也可以使用 root 属性：

const theme = createTheme(
  components: 
    MuiAppBar: 
      root: 
        colorPrimary: 
          backgroundColor: "red"
        
      
    
  
);

区别在于root关键字