reactjs - theme-ui 并且有没有办法动态计算固定标题的高度并因此将填充添加到以下 div？

Question

所以，我有一个用户可以传入的主题。如果用户传入一个“徽标组件”，那么我会将其插入到一个固定的标题中。该徽标组件可以是 50 - 100 像素高。由于它是固定的，所以我需要它后面的内容低于标题折叠，所以我必须添加等量的像素到它。所以，我有类似的东西：

  <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>

似乎没有获取标题组件的 id/querySelector 然后将其应用于 Box 组件，即..

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

注意：我知道可以在 useEffect 等中计算它的高度。好奇，如果 theme-ui 有一个漂亮的方法。

标签： reactjstheme-ui