如何定制Material Tailwind导航栏的背景色与各类状态样式？

一、修改导航栏背景色 #

直接在Navbar组件的className中添加Tailwind背景色类，可搭配阴影类增强视觉层级：

// 替换原Navbar组件的className
<Navbar className="mx-auto max-w-screen-xl px-4 py-2 bg-indigo-600 shadow-md">

可根据需求替换bg-indigo-600为任意Tailwind颜色类，比如bg-gray-900、bg-teal-500等。

二、自定义文本基础颜色 #

1. 主标题与导航链接文本 #

修改Typography组件的文本颜色类，替代原有颜色属性：

// 网站标题
<Typography
  as="a"
  href="#"
  variant="h6"
  className="mr-4 cursor-pointer py-1.5 lg:ml-2 text-white"
>
  Material Tailwind
</Typography>

// 导航链接（Home/Contact Us）
<Typography
  as="a"
  href="#"
  variant="small"
  className="font-medium text-white"
>
  <ListItem className="flex items-center gap-2 py-2 pr-4">Home</ListItem>
</Typography>

2. 下拉菜单文本 #

调整下拉菜单内的文本颜色，适配深色背景：

// 下拉菜单标题
<Typography
  variant="h6"
  className="flex items-center text-sm font-bold text-white"
>
  {title}
</Typography>
// 下拉菜单描述
<Typography
  variant="paragraph"
  className="text-xs !font-medium text-gray-200"
>
  {description}
</Typography>

三、自定义交互状态样式（激活/聚焦/已访问） #

1. 激活（Active）状态 #

给ListItem添加激活状态样式，同时利用selected属性适配菜单展开状态：

<ListItem
  className="flex items-center gap-2 py-2 pr-4 font-medium text-white active:bg-indigo-700 active:text-white selected:bg-indigo-700 selected:text-white"
  selected={isMenuOpen || isMobileMenuOpen}
  onClick={() => setIsMobileMenuOpen((cur) => !cur)}
>
  Resources
  {/* 图标部分保持不变 */}
</ListItem>

2. 聚焦（Focus）状态 #

为按钮、图标按钮等可交互元素添加聚焦样式：

// 登录按钮
<Button variant="text" size="sm" className="text-white focus:bg-indigo-700 focus:outline-none">
  Log In
</Button>
// 移动端菜单按钮
<IconButton
  variant="text"
  className="lg:hidden text-white focus:bg-indigo-700 focus:outline-none"
  onClick={() => setOpenNav(!openNav)}
>
  {/* 图标部分保持不变 */}
</IconButton>

3. 已访问（Visited）状态 #

给下拉菜单的<a>标签添加已访问状态样式：

<a href="#" key={key} className="visited:text-purple-200">
  <MenuItem className="flex items-center gap-3 rounded-lg hover:bg-indigo-700">
    {/* MenuItem内容保持不变 */}
  </MenuItem>
</a>

核心修改后代码片段 #

整合上述修改后的NavbarWithMegaMenu组件核心部分：

export function NavbarWithMegaMenu() {
  const [openNav, setOpenNav] = React.useState(false);

  React.useEffect(() => {
    window.addEventListener(
      "resize",
      () => window.innerWidth >= 960 && setOpenNav(false),
    );
  }, []);

  return (
    <Navbar className="mx-auto max-w-screen-xl px-4 py-2 bg-indigo-600 shadow-md">
      <div className="flex items-center justify-between">
        <Typography
          as="a"
          href="#"
          variant="h6"
          className="mr-4 cursor-pointer py-1.5 lg:ml-2 text-white"
        >
          Material Tailwind
        </Typography>
        <div className="hidden lg:block">
          <NavList />
        </div>
        <div className="hidden gap-2 lg:flex">
          <Button variant="text" size="sm" className="text-white focus:bg-indigo-700 focus:outline-none">
            Log In
          </Button>
          <Button variant="gradient" size="sm">
            Sign In
          </Button>
        </div>
        <IconButton
          variant="text"
          className="lg:hidden text-white focus:bg-indigo-700 focus:outline-none"
          onClick={() => setOpenNav(!openNav)}
        >
          {openNav ? (
            <XMarkIcon className="h-6 w-6" strokeWidth={2} />
          ) : (
            <Bars3Icon className="h-6 w-6" strokeWidth={2} />
          )}
        </IconButton>
      </div>
      <Collapse open={openNav}>
        <NavList />
        <div className="flex w-full flex-nowrap items-center gap-2 lg:hidden">
          <Button variant="outlined" size="sm" className="text-white border-white focus:bg-indigo-700 focus:outline-none" fullWidth>
            Log In
          </Button>
          <Button variant="gradient" size="sm" fullWidth>
            Sign In
          </Button>
        </div>
      </Collapse>
    </Navbar>
  );
}

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