material-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ファイルなので、それをラチェットしないと、MaterialスペックからAppBarの高さが拡張されます。 src/stylesの現在のmasterブランチのバージョンで

がdeliver this height readilyに思わgetMuiTheme.jsがあるが、@nextバージョンで私が探しています、そのファイルが存在すらしていないとTBH、私は簡単にどのようにその高さを決定することはできませんもう設定されていません。

AppBarが現在​​であることがわかりましたので、この質問に答えるのは難しいかもしれませんが、誰かがこれをうまく処理していると思います。

ありがとうございました！

Answer 1

私が見たすべてのケースでは、AppBarは最初の子としてツールバーで実装されています。ツールバーのスタイルシートは、テーマに定義されているブレークポイントに基づいて高さを決定します。

はこちらをご覧ください：https://github.com/callemall/material-ui/blob/v1-beta/src/Toolbar/Toolbar.js

をあなたが該当ブレークポイントのために高さを変化させる、あなたのアプリケーションバーイメージのクラスにスタイルシートを定義するために同様のアプローチを使用することができます。次に、コンポーネントをレンダリングするときに、クラスをイメージに適用します。

注：ツールバー、AppBarなどで実行されているように、withStyles HOCを使用する場合、そのスタイルシートで定義されたクラスは、クラスという名前の小道具を介して利用できます。

あなたはAppBarの合成の必要性については正しいですが、その問題はまだ解決されておらず、これはとにかくベータブランチです。それが解決されると、より価値のあるソリューションが移行する価値があるはずです。

この回答が役に立ったら嬉しいです。私はコードサンプルを追加しましたが、食料品店の駐車場で待っている間に私の電話から応答しています。私がチャンスを得たら、私はこの答えを更新します。ここで

は、新たな再利用可能なコンポーネントのスタイルを複製し、1つのアプローチです：

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

別のアプローチは、それがを使用するようrootクラスfor all Toolbarsをオーバーライドし、business variablesとしてテーマに、標準ツールバーの高さを追加することです彼ら、そしてあなたは再びそれらを参照する必要がある時はいつでもテーマを使用します。彼らはテーマの一部だから

// 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, 
      }, 
     }, 
     }, 
    }, 
    }); 

次に、あなたが作成したスタイルシートでは、これらの高さを参照することができます。UPDATED

1.0.0-beta.11発売後：

各ブレークポイントのためのツールバーminHeightの提供をテーマにミックスイン可能なツールバーが用意されました。あなたがアプリケーションバーコンポーネントの標準の高さに対する元素のスタイルをする必要がある場合は、独自のスタイルを構築するために、このオブジェクトを使用することができます。

この例では

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の高さに基づく値に設定する単純なケースを解決します。