theme-ui and is there a way to dynamically calculate a height of a fixed header and as such add padding to the following div?

Question

So, I have a theme that a user can pass in. If the user passes in a "logo component", then I will then slot that into a fixed header. That logo component can be 50 - 100pixels tall. Since its fixed, then I need the content after it to come below the header fold, so I have to then add that equal amount in pixels to it. So, I have something like:

  <Box as="header" variant="layout.header">
    {
      LogoComponent && (
        <Flex variant="styles.logo">
          <LogoComponent />
        </Flex>
      )
    }
  </Box>
  // ** THIS needs enough padding to sit under, but user can pass in a
  // LogoComponent of varying heights.
  <Box variant="styles.content"> 
    // bunch of text in here
  </Box>

It doesn't seem that getting the id/querySelector of the header component and then applying it to the Box component ie..

 sx={{
   pt: calc() // ?
 }}

Note: I understand can do a calculation on its height in a useEffect etc.. curious, if theme-ui has a nifty way of doing it.

Answer 1

one of the solutions to do so is by using something like following. In your case you can do the padding in similar way.

sx={{
 width: [
 'calc(100% - 32px)',
 'calc(50% - 32px)',
 'calc(33.33% - 32px)',
 'calc(33.33% - 32px)',
 'calc(33.33% - 32px)',
 ],
}}