Question

我正在尝试将自定义颜色用于AppBar标头。 AppBar有标题＆＃39;我的AppBar＆＃39;。我使用白色作为我的主要主题颜色。它适用于酒吧，但标题＆＃39; AppBar也使用相同的白色＆＃39;色＆＃39;

这是我的代码：

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＆＃39;标题＆＃39;颜色，没有标题显示。我应该包括什么或者我放错了什么？

这是我的输出：

Answer 1

从我在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

Answer 2

最后，我在AppBar中了解了titleStyle的样式标题。

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

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

Answer 3

默认情况下，它使用调色板的对比度文本道具（v3）：

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

Answer 4

创建样式时：

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

然后在组件中使用以上样式：

const classes = useStyles();

<AppBar className={clsx(classes.root, className)} />

Answer 5

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

您可以将此内联代码添加到您的代码中

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

或您的CSS

import './home.css';

将此输入您的代码

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

希望能提供帮助。

Answer 7

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

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

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

 style={styles.button}
 style={styles.appBarBackground}

Answer 8

如果您要在材料UI设计中更改Appbar背景，请尝试以下代码

 tf_options = tensorflow::SessionOptions();
 auto deviceList = tf_options.config.gpu_options().visible_device_list();

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

首先使create const var

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

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

8 个答案: