JSS Obj - 从同一父 obj 中的另一个属性引用属性值

Question

我有一个 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: Cannot read property 'height' of undefined”

 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,
    });

Answer 1

似乎this.header.height 中的this 指的是没有header 的main_horizontal_container。相反，您可以将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,
  });
}