Chakra 自定义组件库 - 响应式 height={{ base: "15vh", "2xl": "30vh" }} 不起作用

Question

我有一个带有 NavBar 组件的自定义 ui 库

function NavBar({ navItems, sticky, maxWidth, logoUrl }: NavProps_t) {
    return sticky ? (

        <Box 
        className={'sticky__nav-bar__container'}
            position={"absolute"} zIndex={1} height={{ base: "15vh", "2xl": "30vh" }} m={0}>
            <Box
                className={cn(styles['sticky__nav-bar'])}
                position={"sticky"}
                zIndex={0}
                minHeight={"5rem"}
                height={"10vh"}
                width={"100vW"}
                maxW={{ base: "100vW", "2xl": maxWidth }}
                top={0}
                left={0}>
                <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} />
            </Box>
        </Box>
    ) : <Box className={styles['non-sticky__nav-bar']}
        bg={"rgba(123, 60, 45, 0.5)"}
        position={"relative"} zIndex={1}
        top={0}
        minHeight={"5rem"}
        height={"10vh"}
        width={"100vW"}
        maxW={{ base: "100vW", "2xl": maxWidth }}
    >
        <ResponsiveNavBar navItems={navItems} maxWidth={maxWidth} logoUrl={logoUrl} />
    </Box>
}

一旦构建完成，我可以看到它被转换为 height: { base: "15vh", "2xl": "30vh" } 在下面第 8 行代码中

function N({ navItems: s, sticky: a, maxWidth: e, logoUrl: o }) {
  return a ? /* @__PURE__ */ i(
    c,
    {
      className: "sticky__nav-bar__container",
      position: "absolute",
      zIndex: 1,
      height: { base: "15vh", "2xl": "30vh" },
      m: 0,
      children: /* @__PURE__ */ i(
        c,
        {
          className: h(l["sticky__nav-bar"]),
          position: "sticky",
          zIndex: 0,
          minHeight: "5rem",
          height: "10vh",
          width: "100vW",
          maxW: { base: "100vW", "2xl": e },
          top: 0,
          left: 0,
          children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o })
        }
      )
    }
  ) : /* @__PURE__ */ i(
    c,
    {
      className: l["non-sticky__nav-bar"],
      bg: "rgba(123, 60, 45, 0.5)",
      position: "relative",
      zIndex: 1,
      top: 0,
      minHeight: "5rem",
      height: "10vh",
      width: "100vW",
      maxW: { base: "100vW", "2xl": e },
      children: /* @__PURE__ */ i(p, { navItems: s, maxWidth: e, logoUrl: o })
    }
  );
}

在应用程序中使用后不起作用。当我在浏览器中检查时

我可以看到除响应高度之外的所有其他样式。我也用 ChakraProvider 包装了主应用程序。 想知道我做错了什么。谢谢

Answer 1

问题是该组件依次缺少 Chakra 提供程序且未配置断点。在组件库中添加上下文提供程序将通过提供默认主题来解决问题，但会覆盖使用该组件的应用程序的主题，从而导致主题问题。将 Chakra ui 标记为对等依赖项并将其从汇总中排除将确保从消费应用程序提供主题而不会发生主题冲突。

有关详细信息，请参阅以下讨论https://github.com/chakra-ui/chakra-ui/discussions/4534，并感谢@goutamsamal9帮助解决这个问题。