如何修改React项目中NextUI Navbar的背景色？

NextUI的Navbar组件支持多种方式修改背景色，以下是几种可行方案：

方案1：通过组件css prop直接设置 #

NextUI基于css-in-js实现样式定制，直接在Navbar组件上添加css属性并指定backgroundColor即可覆盖默认样式：

<Navbar isBordered variant="sticky" css={{ backgroundColor: "#2563eb" }}>
  {/* 导航栏内容 */}
</Navbar>

颜色值支持十六进制、RGB、HSL格式，也可以使用NextUI内置主题变量，比如：

css={{ backgroundColor: "var(--nextui-colors-primary)" }}

方案2：使用外部CSS文件 #

给Navbar添加自定义类名，再在外部CSS文件中设置样式：

1. 给Navbar添加className：

<Navbar isBordered variant="sticky" className="custom-navbar">

2. 在Header.css中添加样式（若默认样式优先级更高，可使用!important）：

.custom-navbar {
  background-color: #1e293b !important;
}

修改后的完整代码示例 #

import { Navbar, Input } from "@nextui-org/react";
import { SearchIcon } from "./SearchIcon.js";
import './Header.css'

function Header() {
  
  return (
      <Navbar isBordered variant="sticky" css={{ backgroundColor: "#2563eb" }}>
        <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;

注意：variant="sticky"仅控制导航栏的定位行为，不会影响背景色的自定义设置。

内容的提问来源于stack exchange，提问作者krazykill123