Почему появляется ошибка «Received `false` for a non-boolean attribute»?

Question

[TreeFall1]

У меня проект на Next.js и typescript. В консоли получаю ошибку:

Warning: Received `false` for a non-boolean attribute `collapsed`.

Но я ведь задал его тип как boolean:

type HeaderEl = {
  collapsed: boolean;
};

Вот здесь использую:
<HeaderEl collapsed={isScrolled}>
Свойство isScrolled как раз таки true/false. Почему получается такая ошибка, если я задал boolean, но все равно жалуется что это non-boolean?

Comments

[Алексей Уколов]

Покажите весь код компонента HeaderEl.

[TreeFall1]

Алексей Уколов,

spoiler

import { useEffect, useState } from "react";
import Link from "next/link";
import tw from "tailwind-styled-components";

import { BurgerMenuIcon, Container, LogoIcon } from "src/shared/ui/atoms";
import { IconButton } from "src/shared/ui/molecules";
import { useTranslation } from "next-i18next";
import { SelectLanguage } from "src/features";

export const Header = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  const { t } = useTranslation("common");

  useEffect(() => {
    window.addEventListener("scroll", () =>
      setIsScrolled(window.scrollY >= 128),
    );
  }, []);

  return (
    <HeaderEl collapsed={isScrolled}>
      <Container>
        <HeaderWrapper>
          <LogoWrap>
            <Link
              href={"/"}
              aria-label="Hit-proxy home"
            >
              <LogoIcon className="w-[7.6rem] h-[1.6rem] md:w-[9.5rem] md:h-[2rem] lg:w-[11.875rem] lg:h-[2.5rem]" />
            </Link>
          </LogoWrap>

          <NavigationWrap>
            <NavigationList>
              <NavigationItem>
                <Link
                  href={"/"}
                  className={linkStyles}
                >
                  {t("navigation.prices")}
                </Link>
              </NavigationItem>
              <NavigationItem>
                <Link
                  href={"/"}
                  className={linkStyles}
                >
                  {t("navigation.ipV6Support")}
                </Link>
              </NavigationItem>
              <NavigationItem>
                <Link
                  href={"/"}
                  className={linkStyles}
                >
                  {t("navigation.FAQ")}
                </Link>
              </NavigationItem>
              <NavigationItem>
                <Link
                  href={"/contacts"}
                  className={linkStyles}
                >
                  {t("navigation.contacts")}
                </Link>
              </NavigationItem>
            </NavigationList>
          </NavigationWrap>

          <ActionsWrap>
            <ActionsList>
              <ActionsItem>
                <SelectLanguage />
              </ActionsItem>
            </ActionsList>
          </ActionsWrap>

          <SidebarWrap>
            <Sidebar />
          </SidebarWrap>
        </HeaderWrapper>
      </Container>
    </HeaderEl>
  );
};

type HeaderEl = {
  collapsed: boolean;
};
const HeaderEl = tw.header<HeaderEl>`
z-[100]
z-header
fixed
top-0
left-0
w-full
flex
items-center
duration-md

${(p) =>
  p.collapsed
    ? "h-[var(--header-height-mobile-collapsed)] md:h-[var(--header-height-tablet-collapsed)] lg:h-[var(--header-height-desktop-collapsed)] bg-opacitied-surface-light backdrop-blur-opacitied-surface-light"
    : "h-[var(--header-height-mobile-default)] md:h-[var(--header-height-tablet-default)] lg:h-[var(--header-height-desktop-default)]"}
`;

const HeaderWrapper = tw.div`
relative
flex
items-center
justify-between
`;

const LogoWrap = tw.div``;

const NavigationWrap = tw.nav`
hidden
md:block
absolute
left-1/2
top-1/2
-translate-x-1/2
-translate-y-1/2
`;

const NavigationList = tw.ul`
flex
items-center
gap-6
`;
const NavigationItem = tw.li`
list-none
`;
const linkStyles =
  "link1 text-contrast-light hover:text-opacitied-light duration-sm";

const ActionsWrap = tw.div`
hidden
md:block
`;
const ActionsList = tw.ul`
flex
items-center
gap-2
`;
const ActionsItem = tw.li`
list-none
`;

const SidebarWrap = tw.div`
block
md:hidden
`;

export const Sidebar = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <IconButton
      id="sidebar-button"
      aria-label="sidebar"
      variant="ghost"
      color="inherit"
      onClick={() => setIsOpen((v) => !v)}
    >
      <BurgerMenuIcon isOpen={isOpen} />
    </IconButton>
  );
};

Answer 1

[Алексей Уколов]

Имя кастомного класса должно начинаться с доллара: $collapsed.