2

我有一个 position="fixed" 的 material-ui AppBar 组件，因此它作为主菜单栏粘在窗口的上边框上。这里的组件名称是“header”，它使用这个 JSS obj 设置样式。

由于主容器在 AppBar 组件下方滑动到顶部 0，因此当它的位置固定时，我需要在 AppBar 正下方将其顶部边缘以使它们连续定位。

最好，我想将 margin-top 设置为 AppBar 高度的实际值，所以我不需要手动设置它。（AppBar 的高度也会根据其内容进行调整，因此它的大小可能是可变的）

但是我不知道该怎么做，所以我必须手动设置 height/margin-top(main_container)。

至少：如何让 main_horizo​​ntal_container.marginTop 从 header.height 中获取它的值，所以我只需设置一次？

不幸的是，这不能按计划工作-“TypeError：无法读取未定义的属性'高度'”

 const styles = theme => ({
      main_horizontal_container:{
        display: "flex",
        get marginTop () {return this.header.height}
      },
      header:{
        height: 64,
      },
      sidebar:{
        //flexBasis: content,
      },
      content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing.unit * 3,
        minWidth: 0, // So the Typography noWrap works
      },
      toolbar: theme.mixins.toolbar,
    });
4

1 回答 1

1

似乎thisinthis.header.height指的是main_horizontal_containerwhich 没有header. 相反，您可以提取header到一个变量：

const styles = theme => {
  const header = {
    height: 64,
  };

  return ({
    main_horizontal_container:{
      display: "flex",
      get marginTop () {return header.height}
    },
    header,
    sidebar:{
      //flexBasis: content,
    },
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing.unit * 3,
      minWidth: 0, // So the Typography noWrap works
    },
    toolbar: theme.mixins.toolbar,
  });
}
于 2018-05-25T08:13:34.460 回答