【问题标题】：How to use Material UI ThemeManager for setting custom AppBar height and color?如何使用 Material UI ThemeManager 设置自定义 AppBar 高度和颜色？
【发布时间】：2016-02-22 11:41:33
【问题描述】：

我在流星应用程序中使用Callemall react material-ui 依赖项。我想知道如何更改正在使用的 AppBar 的颜色和高度。这可以通过对override the theme variables 使用内联样式来实现吗？如果有，怎么做？

injectTapEventPlugin();
var {AppBar} = MUI;
var {ThemeManager, LightRawTheme} = Styles;

Header = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(LightRawTheme);
    }
        ;
    },

    render: function () {
        return (
            <AppCanvas>
                <AppBar iconElementLeft={
                    <div className="header-left-area">
                        <FloatingActionButton
                            title="Register"
                            iconClassName="muidocs-icon-action-grade"
                            secondary={true}
                            mini={true}/>
                    </div>
                }/>
            </AppCanvas>
        );
    }
});

【问题讨论】：

标签： meteor reactjs browserify material-ui

【解决方案1】：

有两种方法可以解决这个问题。一种是使用你提到的内联样式道具。这种方式并不完全奏效：

<AppBar style={{backgroundColor='red', minHeight=50}} titleStyle={{lineHeight=50}}/>

原因是在AppBar 组件内部，主题的应用栏高度用于here 的某些计算中，使用内联样式不容易覆盖。

应该完全有效的另一种方法如下。在Header 组件中，选择在render() 之前执行的生命周期方法。由于您只是将修改后的主题向下传递，因此我将使用getChildContext() 进行演示：

getChildContext() {
  var myTheme = ThemeManager.getMuiTheme(LightRawTheme);

  //override the properties you want to
  //import Colors from 'material-ui/lib/styles/colors'
  myTheme.appBar.color = Colors.<choose-a-color>;
  myTheme.appBar.height = 50;

  //once done overriding, pass the theme using context
  return {
    muiTheme: myTheme
  };
}

主题文档中也提到了所有这些。请参阅 theme-manager.js 以获取您可以覆盖的公开属性列表。

【讨论】：

【解决方案2】：

您可能希望远离 inline style 属性。见this。

所有 Material-UI 组件的样式都是内联定义的。你可以阅读关于这个决定的讨论主题以及这个讨论 JS 中的 CSS 的演示文稿。

但是，我们遇到了这种方法的重要限制。

在每次渲染时重新计算所有样式时性能不佳

匆忙调试

服务器端媒体查询

服务器端伪元素

与服务器端渲染交互的时间更长（例如：悬停）

我们现在有 Material UI v1.0。

材质 UI v1.0

您有很多选择来做到这一点 - 查看implementation code 以了解它是如何工作的。

如果这是你的主题

const YourTheme = createMuiTheme({
  palette: createPalette({
    background: {
      appBar: '#000'
    }
  }),
  overrides: {
    MuiAppBar: {
      root: {
        background: '#fff'
      }
    }
  }

});

你有很多选择，这里有 2 个：

1使用你刚刚编码的默认颜色

<AppBar color={'default'}>
...
</AppBar>

AppBar 将是白色的#fff。

2 或者从palette.background.appBar继承颜色

<AppBar color={'inherit'}>
...
</AppBar>

AppBar 将是黑色的#000。

【讨论】：

【解决方案3】：

要降低高度，请使用：variant="dense"

    <AppBar
      position="fixed"
      className={classNames(classes.appBar, {
        [classes.appBarShift]: this.props.home.openSidebar
      })}
    >
      <Toolbar disableGutters={!this.props.home.openSidebar} variant="dense">
        <IconButton
          color="inherit"
          aria-label="Open drawer"
          onClick={this.handleDrawerToggle}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" color="inherit" noWrap style={{ flex: 1 }}>
          Tittle
        </Typography>
      </Toolbar>
    </AppBar>

要改变颜色，我认为最好的方法是设置主题

    const theme = createMuiTheme({
      palette: {
        primary: amber,
        secondary: {
          main: '#f44336'
        }
      }
    });

    class App extends Component {
      render() {
        return (
          <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
        );
      }
    }

【讨论】：