Question

我有一个材料-ui AppBar组件，位置=＆＃34;固定＆＃34;所以它作为一个主要的操纵杆粘在窗户的上边界。这里的组件名称是＆＃34;标题＆＃34;它的风格与这个JSS obj。

由于主容器在AppBar组件下滑到前0位，当它的位置固定时，我需要在AppBar下面向下边缘，以便让它们连续定位。

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

但是我不知道怎么做，所以我必须手动设置高度/ margin-top（main_container）。

至少：如何让main_horizontal_container.marginTop从header.height获取其值，所以我只需要设置一次？

不幸的是，这不能按计划运行 - ＆＃34; TypeError：无法读取属性＆＃39; height＆＃39;未定义＆＃34;

 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中的this.header.height似乎指的是main_horizontal_container没有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,
  });
}

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

1 个答案: