reactjs - Material-ui:AppBar:将图像高度限制为AppBar高度的策略？

Question

任何人都可以提供有关在 AppBar 中放置图像并将其限制为标准 Material 高度(例如桌面的 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>

效果很好。

实际 Logo 是一个高度大于 64 的 png 文件，因此如果我不降低它，它会将 AppBar 的高度扩展到 Material 规范之外。

在src/styles的当前主分支版本中，有一个getMuiTheme.js，它似乎 deliver this height readily ，但在我正在查看的 @next 版本中，该文件甚至不存在，而且说实话，我无法轻松确定如何设置该高度。

我发现AppBar当前为renovated for composability ，所以这种流失可能会让回答这个问题变得具有挑战性，但以防万一有人能很好地处理这个问题，我想我会把这个问题扔在那里。

谢谢!

Answer 1

在我见过的所有情况下，AppBar 都是使用 Toolbar 作为它的第一个子项来实现的。工具栏的样式表根据主题中定义的断点决定其高度。

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

您可以使用类似的方法为 AppBar 图像定义一个样式表，其中包含一个类，该类可以改变适用断点的高度。然后在渲染组件时，将该类应用到您的图像。

注意:如果您使用 withStyles HOC，就像在 Toolbar、AppBar 等中所做的那样，则该样式表中定义的类将通过名为 classes 的 prop 可用。

您关于 AppBar 对可组合性的需求是正确的，但该问题尚未解决，而且无论如何这是 beta 分支。当这个问题解决后，应该有一个更好的、值得迁移的解决方案。

希望这个答案对您有所帮助。我本想添加代码示例，但我在杂货店 parking 场等待时用手机接听。如果有机会我会更新这个答案。

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

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 ，覆盖 root 类 for all Toolbars这样它就可以利用它们，并在您需要再次引用它们时使用主题:

  // 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)'
  }
}