NextUI Navbar 背景颜色自定义教程：掌握两种高效方法

import { Navbar, Input } from "@nextui-org/react";
import { SearchIcon } from "./SearchIcon.js"; // 假设 SearchIcon 存在于当前目录
import './Header.css'; // 引入自定义 CSS 文件（如果需要）

function Header() {
  return (
    <Navbar 
      isBordered 
      variant="sticky"
      css={{
        // 设置导航栏主背景色为深蓝色，可以使用 NextUI 主题变量
        $$navbarBackgroundColor: "var(--nextui-colors-blue800)", 
        // 设置模糊背景色为半透明深蓝色，与主背景色保持一致，确保粘性效果下的视觉统一
        $$navbarBlurBackgroundColor: "rgba(28, 64, 118, 0.8)", 
        // 如果需要完全透明的导航栏，可以将两者都设置为 "transparent"
        // $$navbarBackgroundColor: "transparent",
        // $$navbarBlurBackgroundColor: "transparent"
      }}
    >
      <Navbar.Brand css={{ mr: "$4" }}>
        <h5>ABC</h5>
      </Navbar.Brand>
      <Navbar.Content
        css={{
          "@xsMax": {
            w: "70%",
            jc: "space-between",
          },
        }}
      >
        <Navbar.Item
          css={{
            "@xsMax": {
              w: "100%",
              jc: "right",
            },
          }}
        >
          <Input
            clearable
            contentLeft={
              <SearchIcon fill="var(--nextui-colors-accents6)" size={16} />
            }
            contentLeftStyling={false}
            css={{
              w: "100%",
              "@xsMax": {
                mw: "300px",
              },
              "& .nextui-input-content--left": {
                h: "100%",
                ml: "$4",
                dflex: "center",
              },
            }}
            placeholder="Search"
          />
        </Navbar.Item>
      </Navbar.Content>
    </Navbar>
  );
}

export default Header;

/* Header.css */
.nextui-navbar-container {
  background-color: #333 !important; /* 设置为深灰色 */
  /* backdrop-filter: blur(8px) saturate(180%) !important; */ /* 可选：调整模糊效果 */
  /* 确保使用 !important 声明以覆盖 NextUI 默认样式 */
}