材料的UI：AppBar：策略限制的图像高度AppBar高度？

Question

谁能提供指导围绕惯用方式将一个图像中的AppBar并已将其被限制在标准材料高度（例如64PX为桌面）？

我目前使用material-ui@next（1.0.0-beta.2目前）。

我发现，这样的：

<AppBar> 
    <Toolbar> 
    <IconButton color="contrast" aria-label="Menu"> 
     <MenuIcon /> 
    </IconButton> 
    <img src={logo} style={{height: 64}}/> 
    <Typography type="title" color="inherit"> 
     React Scratch 
    </Typography> 
    </Toolbar> 
</AppBar> 

效果很好。

实际的标志是具有高度大于64 png文件，所以如果我不冲高下来，它扩展了AppBar的高度，出料规格的。

在 src/styles当前主分支版本

有一个getMuiTheme.js这似乎deliver this height readily，但在@next版本我在看，该文件根本不存在和TBH，我不能轻易确定如何身高正在设置。

我发现AppBar目前正在​​，让流失可能会使它具有挑战性的回答这个问题，但万一任何人有一个很好的手感，我想我会折腾的问题在那里。

谢谢！

Answer 1

在我见过的所有的情况下，一个AppBar与工具栏，因为它是第一个孩子实现。工具栏的样式表根据主题中定义的断点指示其高度。

到这里看看：https://github.com/callemall/material-ui/blob/v1-beta/src/Toolbar/Toolbar.js

您可以使用类似的方法来定义一个类样式表为不同的应用断点高度的AppBar图像。然后，在渲染组件时，将该类应用于图像。

注意：如果您使用withStyles HOC（如在工具栏，AppBar等中所做的那样），则该样式表中定义的类将通过名为classes的道具提供。

对于AppBar对组合性的需求是正确的，但该问题尚未解决，而且这是测试分支。解决问题时，应该有一个更好的解决方案，值得向此迁移。

我希望这个答案有帮助。我会添加代码示例，但是同时在一家杂货店的停车场等待我从我的电话接听。如果我有机会，我会更新这个答案。

这里有一个方法，重复的样式在一个新的可重用的组件：

import createStyleSheet from 'material-ui/styles/createStyleSheet'; 
import withStyles from 'material-ui/styles/withStyles'; 

// define these styles once, if changes are needed because of a change 
// to the material-ui beta branch, the impact is minimal 
const styleSheet = createStyleSheet('ToolbarImage', theme => ({ 
    root: { 
     height: 56, 
     [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: { 
      height: 48, 
     }, 
     [theme.breakpoints.up('sm')]: { 
      height: 64, 
     }, 
    }, 
})); 

// a reusable component for any image you'd need in a toolbar/appbar 
const ToolbarImage = (props) => { 
    const { src, classes } = this.props; 
    return (
     <img src={src} className={classes.root} /> 
    ); 
}; 

// this higher order component uses styleSheet to add 
// a classes prop that contains the name of the classes 
export default withStyles(styleSheet)(ToolbarImage); 

另一种方法是将标准工具栏的高度增加了主题为business variables，覆盖for all Toolbars的root类，以便它利用他们，并使用主题时，你需要再次引用它们：

// define the standard heights in one place 
    const toolbarHeights = { 
    mobilePortrait: 56, 
    mobileLandscape: 48, 
    tabletDesktop: 64, 
    }; 

    // create the theme as you normally would, but add the heights 
    let theme = createMuiTheme({ 
    palette: createPalette({ 
     primary: blue, 
     accent: pink, 
    }), 
    standards: { 
     toolbar: { 
     heights: toolbarHeights, 
     }, 
    }, 
    }); 

    // recreate the theme, overriding the toolbar's root class 
    theme = createMuiTheme({ 
    ...theme, 
    overrides: { 
     MuiToolbar: { 
     // Name of the styleSheet 
     root: { 
      position: 'relative', 
      display: 'flex', 
      alignItems: 'center', 
      minHeight: theme.standards.toolbar.heights.mobilePortrait, 
      [`${theme.breakpoints.up('xs')} and (orientation: landscape)`]: { 
      minHeight: theme.standards.toolbar.heights.mobileLandscape, 
      }, 
      [theme.breakpoints.up('sm')]: { 
      minHeight: theme.standards.toolbar.heights.tabletDesktop, 
      }, 
     }, 
     }, 
    }, 
    }); 

然后你就可以，因为他们是主题的一部分，您创建的任何样式表中引用这些高度。

修订以下1.0.0-beta.11的发布：

现在有许多关于提供工具栏对了minHeight每个断点的主题可用工具栏混入。如果你需要一个元素相对于AppBar组件的标准高度的风格，你可以用这个对象来建立你自己的风格：

const toolbarRelativeProperties = (property, modifier = value => value) => theme => 
    Object.keys(theme.mixins.toolbar).reduce((style, key) => { 
    const value = theme.mixins.toolbar[key]; 
    if (key === 'minHeight') { 
     return { ...style, [property]: modifier(value) }; 
    } 
    if (value.minHeight !== undefined) { 
     return { ...style, [key]: { [property]: modifier(value.minHeight) } }; 
    } 
    return style; 
    }, {}); 

在这个例子中，toolbarRelativeProperties返回将返回一个对象，可以函数传播到你的风格对象。它解决了将指定属性设置为基于AppBar高度的值的简单情况。