[英]How to apply different color in AppBar Title MUI?
I am trying to use my custom color for AppBar
header.我正在尝试将我的自定义颜色用于AppBar
header。 The AppBar
has title 'My AppBar'. AppBar
的标题为“我的 AppBar”。 I am using white as my primary theme color.我使用白色作为我的主要主题颜色。 It works well for the bar but the 'title' of the AppBar
is also using same 'white' color'它适用于栏,但AppBar
的“标题”也使用相同的“白色”颜色
Here is my code:这是我的代码:
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;
But, the palette styles override the AppBar
'title' color and no title is displaying.但是,调色板 styles 覆盖了AppBar
的“标题”颜色,并且没有显示标题。 Should I include something or I have misplaced any?我应该包括一些东西还是我放错了任何东西?
If you ant to change your Appbar background in material ui design ....try following code如果你想在 Material ui 设计中改变你的 Appbar 背景......试试下面的代码
<AppBar style={{ background: '#2E3B55' }}>
or if you want to apply className then follow this step或者如果你想应用 className 然后按照这个步骤
first of all make create const var首先 make create const var
const style = {
background : '#2E3B55';
};
<AppBar className={style}>
From what I see in the material-ui sources, appBar title color is set by palette.alternateTextColor.从我在 material-ui 源中看到的,appBar 标题颜色是由 Palette.alternateTextColor 设置的。 If you add it to your style definition like that:如果您将它添加到您的样式定义中:
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,
},
});
You should see your title without need to style it manually inside each component.您应该可以看到您的标题,而无需在每个组件中手动设置样式。
There are more styling parameters to MuiTheme described here此处描述的 MuiTheme 有更多样式参数
Create your style using makeStyles():使用 makeStyles() 创建您的样式:
const useStyles = makeStyles(theme => ({
root: {
boxShadow: "none",
backgroundColor: "#cccccc"
}
}));
Use the above style in your component:在您的组件中使用上述样式:
const classes = useStyles();
<AppBar className={classes.root} />
Finally, I came to know about titleStyle for styling title in AppBar.最后,我开始了解 AppBar 中标题样式的 titleStyle。
const titleStyles = {
title: {
cursor: 'pointer'
},
color:{
color: Colors.redA200
}
};
<AppBar title={<span style={titleStyles.title}>Title</span>} titleStyle={titleStyles.color}> .............
</AppBar>
By default it uses palette's contrastText prop (v3):默认情况下,它使用调色板的 contrastText 道具(v3):
const theme = createMuiTheme({
palette: {
primary: {
contrastText: 'rgba(0,0,0,0.8)'
}
},
});
first of all, add const to the file.首先,将 const 添加到文件中。 Then apply to the line u need as following shown.然后应用到您需要的行,如下所示。
const styles = { button: { margin: 15,}, appBarBackground:{ background : '#2E3B55' }};
Then add it to the line as shown down然后将其添加到如下所示的行中
style={styles.button}
style={styles.appBarBackground}
- 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',
},
},
});
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>
*** important *** *** 重要 ***
secondary: {
main: '#19857b',
},
color='secondary'
You cat add this inline your code你猫添加这个内联你的代码
<AppBar title="My AppBar" style={{ backgroundColor: '#2196F3' }} >
or if your css或者如果你的 css
import './home.css';
put this to your code把它放到你的代码中
.title {
text-align: left;
background-color: black !important;}
Hope to help.希望有所帮助。
sx
prop 1. 使用sx
道具<AppBar sx={{ bgcolor: "green" }}>
primary.main
color in Palette
2.在Palette
设置primary.main
颜色The Appbar
background color uses the primary color provided from the theme by default. Appbar
背景色默认使用主题提供的原色。
const theme = createTheme({
palette: {
primary: {
main: "#00ff00"
}
}
});
AppBar
default styles in styleOverrides
3.在styleOverrides
设置AppBar
默认样式Use this one if you don't want to touch the primary.main
value:如果您不想触及primary.main
值,请使用此值:
const theme = createTheme({
components: {
MuiAppBar: {
styleOverrides: {
colorPrimary: {
backgroundColor: "red"
}
}
}
}
});
Working on @NearHuscarl answer.处理@NearHuscarl 的答案。 If you want the styles to be applied no matter which appbar color you are on: Eg <Appbar color="secondary"
or <Appbar color="primary"
.如果您希望无论您使用哪种 appbar 颜色都应用样式:例如<Appbar color="secondary"
或<Appbar color="primary"
。 You could alternatively use the root property:您也可以使用 root 属性:
const theme = createTheme({
components: {
MuiAppBar: {
root: {
colorPrimary: {
backgroundColor: "red"
}
}
}
}
});
The difference is the root
keyword区别在于root
关键字
You can set the background color directly using sx property <AppBar variant='elevated' sx={{backgroundColor:'#19857b'}}>您可以直接使用 sx 属性设置背景颜色 <AppBar variant='elevated' sx={{backgroundColor:'#19857b'}}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.