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

在src/styles的当前主分支版本中有一个getMuiTheme.js似乎deliver this height readily，但在我看的@next版本中，该文件没有＆＃ 39; t甚至存在和tbh，我不能轻易确定如何设置高度。

我发现AppBar目前正处于renovated for composability，因此流失可能会让回答这个问题变得更具挑战性，但是如果有人对此有好的处理，我想我会在那里抛出问题

谢谢！

Answer 1

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

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

您可以使用类似的方法为AppBar图像定义带有类的样式表，以改变适用断点的高度。然后在渲染组件时，将类应用于图像。

注意：如果你使用withStyles HOC，就像在工具栏，AppBar等中所做的那样，那个样式表中定义的类将通过名为类的道具提供。

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

另一种方法是将标准工具栏高度添加到主题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发布后更新：

现在主题上有一个工具栏mixin，它为每个断点提供工具栏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)'
  }
}

material-ui：AppBar：将图像高度限制为AppBar高度的策略？

1 个答案: