JSS Obj - ссылаться на значение свойства из другого свойства в том же родительском объекте

Question

Я получил компонент AppBar material-ui, который position = "fixed", поэтому он придерживается верхней границы окна в качестве основной строки меню.Имя компонента здесь - "заголовок". Его стилизация выполняется с помощью этого объекта JSS.

Поскольку основной контейнер перемещается под компонентом AppBar в верхнюю часть 0, когда его положение зафиксировано, мне нужно наложить верхнюю часть вниз прямо подAppBar для их последовательного позиционирования.

Желательно, чтобы в поле margin-top было задано действительное значение высоты AppBar, поэтому мне не нужно устанавливать его вручную.(также высота AppBar подстраивается под его содержимое, поэтому он может иметь переменный размер)

Однако я не знаю, как это сделать, поэтому мне приходится вручную устанавливать высоту / margin-top (main_container).

По крайней мере: Как я могу заставить main_horizont_container.marginTop получить его значение из header.height, поэтому мне нужно установить его только один раз?

Unfort, это не работает, как планировалось - "TypeError: Невозможно прочитать свойство 'height' из 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 в 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,
  });
}