改变NextUI肚脐的背景色

Question

我一直在努力改变NextUI肚脐的背景色。我在react项目中使用NextUI的navbar组件。我想这是有一些性质/属性的，但即使经过大量的研究，我也不知道。请帮帮我。

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

function Header() {
  
  return (
 
      <Navbar isBordered variant="sticky">
        <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;

Answer 1

背景颜色和背景模糊颜色被应用在带有类nextui-navbar-container的div中，据我理解，它会自动出现在那里，并且不能作为一个组件直接影响它。但是可以重写css类nextui-navbar-container，也可以在Navbar组件的css属性中使用css变量--nextui--navbarBackgroundColor和--nextui--navbarBlurBackgroundColor，如下所示：

<Navbar css={{
  $$navbarBackgroundColor: "transparent",
  $$navbarBlurBackgroundColor: "transparent"
}}>