material-ui: AppBar: strategy for restricting an image height to AppBar height?

Viewed 4520

can anyone provide guidance around an idiomatic way to place an image in an AppBar and have it be restricted to the standard material height (e.g. 64px for a desktop)?

i'm currently using material-ui@next (1.0.0-beta.2 currently).

i have found that something like:

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

works well.

the actual logo is a png file with a height greater than 64, so if i don't ratchet it down, it expands the height of the AppBar out of Material spec.

in the current master branch version of src/styles there is a getMuiTheme.js which seems to deliver this height readily, but in the @next version i am looking at, that file doesn't even exist and tbh, i can't easily determine how that height is being set anymore.

i found that the AppBar is currently being renovated for composability, so that churn might make it challenging to answer this question, but just in case anyone has a good handle on this, i figured i would toss the question out there.

thanks!

1 Answers
Related