Material UI v1.0

Question

我在流星应用程序中使用Callemall反应材料-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>
        );
    }
});

Answer 1

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

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

原因是在AppBar组件内部，主题的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。

Answer 2

您可能希望远离inline style道具。请参阅this。

所有Material-UI组件都将其样式内联定义。您可以   阅读有关此决定的讨论主题以及此决定   演讲讨论JS中的CSS。

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


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

喧嚣调试

服务器端媒体查询

服务器端伪元素

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

我们现在有Material UI v1.0。

Material 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。

Answer 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>
        );
      }
    }

如何使用Material UI ThemeManager设置自定义AppBar高度和颜色？

3 个答案:

Material UI v1.0

如果这是你的主题

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