材料的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高度的值的簡單情況。