JSS Obj - 引用同一父对象中另一个属性的属性值

Question

我得到了一个 material-ui AppBar 组件，它的位置="固定"，所以它作为主手稿栏粘在窗口的上边框上。这里的组件名称是"header"，它被这个JSS obj设置样式。

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

最好是，我想将边距顶部设置为具有 AppBar 高度的实际值，这样我就不需要手动设置它。(应用栏高度也会根据其内容进行调整，因此其大小可能可变(

但是我不知道该怎么做，所以我必须手动设置高度/边距顶部(main_container(。

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

不幸的是，这不能按计划工作 - "类型错误：无法读取未定义的属性'高度'

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中指的是没有headermain_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,
});
}