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

【问题标题】：How to apply different color in AppBar Title MUI?如何在 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' 颜色并且没有标题显示。我应该包括一些东西还是我放错了任何东西？

这是我的输出：

【问题讨论】：

标签： reactjs material-ui

【解决方案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。使用`sx`prop

<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关键字

【讨论】：

MUI v5更新

1。使用sxprop

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

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

1。使用`sx`prop

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

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