如何在AppBar标题材料中应用不同的颜色-ui

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"标题"颜色,并且不会显示标题.我应该包括什么或者我放错了吗？

这是我的输出:

Answer 1

材质 UI v5更新

1.使用sx道具

<AppBar sx={{ bgcolor: "green" }}>

2. 设置primary.main颜色Palette

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

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

3.设置AppBar默认样式styleOverrides

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

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

Answer 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 这里

Answer 3

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

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

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

const classes = useStyles();

<AppBar className={classes.root} />

Answer 4

• 请先制作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'

Answer 5

如果您要在材料用户界面设计中更改Appbar背景....请尝试以下代码

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

或者，如果您要应用className，请按照以下步骤操作

首先make create const var

const style = {

    background : '#2E3B55';
};

<AppBar className={style}>

Answer 6

最后,我在AppBar中了解了titleStyle的样式标题.

const titleStyles = {
  title: {
    cursor: 'pointer'

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