Блог

Итак, у меня есть тема, которую пользователь может передать. Если пользователь передаст «компонент логотипа», я затем вставлю его в фиксированный заголовок. Этот компонент логотипа может иметь высоту 50-100 пикселей. Поскольку это исправлено, мне нужно, чтобы содержимое после него находилось ниже сгиба заголовка, поэтому я должен добавить к нему равное количество пикселей. Итак, у меня есть что-то вроде:

   <Box as="header" variant="layout.header">
    {
      LogoComponent amp;amp; (
        <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>
 

Не похоже, что получение идентификатора/querySelector компонента заголовка и последующее применение его к компоненту коробки, т. Е…

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

Примечание: Я понимаю, что могу рассчитать его высоту в эффекте использования и т. Д. Любопытно, если у theme-ui есть отличный способ сделать это.