Ошибка типа: не удается прочитать свойство 'main' из неопределенного - реагировать на проблему

Question

Я делаю простую веб-страницу с React, и я определил следующую палитру, используя в теме, используя createMuiTheme из material-ui.

palette: {
    primary: {
      main: "#333333"
    },
    secondary: {
      main: "#727171"
    },
    background: {
    paper: "#f8f3f0",
    default: "#f8f3f0"
    },
    accent: {
      main: "#80d6d1"
    }
}

Затем, когда я хочу использовать свой цвет акцента для некоторого текста Я использую:

const useStyles = makeStyles(theme => ({
  content: {
    backgroundColor: theme.palette.background.default,
    minHeight: "90vh"
    color: theme.palette.background.main
  }
}));

Я получаю следующую ошибку:

TypeError: Cannot read property 'main' of undefined

  71 |     minHeight: "90vh"
> 72 |     color: theme.palette.accent.main
  73 |   }
  74 | }));

Есть идеи, что здесь не так?