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文件，因此，如果我不降低它的高度，它会将AppBar的高度扩展到Material规范之外。

在当前主分支版本src/styles有一个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等中所做的那样），则可以通过名为class的属性来使用该样式表中定义的类。

您对AppBar的可组合性需求是正确的，但是该问题尚未解决，这仍然是beta分支。解决后，应该有一个更好的解决方案值得向其移植。

我希望这个答案会有所帮助。我会添加代码示例，但是在杂货店停车场等待时我正在通过电话应答。如果有机会，我将更新此答案。

这是一种在新的可重用组件中复制样式的方法：

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类，以便其使用它们，并在需要再次引用它们时使用主题：

  // 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高度的值的简单情况。

一个简单的用法示例是生成用于高度计算的动态CSS表达式，这取决于AppBar的标准高度：

const componentStyle = theme => ({
  root: {
    height: toolbarRelativeProperties('height', value => `calc(100% - ${value}px)`)(theme)
  }
});

生成的样式定义可能如下所示：

{
  height: 'calc(100% - 56px)',
  '@media (min-width:0px) and (orientation: landscape)': {
    height: 'calc(100% - 48px)'
  },
  '@media (min-width:600px)': {
    height: 'calc(100% - 64px)'
  }
}