使用TailwindCSS+Flowbite React的Navbar.Toggle汉堡菜单异常求助

问题现象 #

汉堡菜单本该仅显示图标，却额外出现了“Open main menu”的文字，效果如下：

解决方案 #

1. 检查Flowbite核心CSS是否正确引入

Flowbite React组件依赖Flowbite的基础样式，若未正确引入，会导致默认的文本隐藏样式失效。

• 在tailwind.config.js中配置Flowbite插件：

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}"
  ],
  plugins: [
    require('flowbite/plugin')
  ]
}

• 在全局CSS文件（如index.css）中导入Flowbite样式：

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "flowbite/dist/flowbite.min.css";

2. 自定义Navbar.Toggle的label文本

Flowbite React的Navbar.Toggle默认带有“Open main menu”文本，可通过设置空label直接隐藏：

<Navbar.Toggle label="" />

若要兼顾可访问性（让屏幕阅读器识别），可保留文本并通过sr-only类隐藏视觉显示：

<Navbar.Toggle label="Open main menu" className="sr-only:text-hidden" />

3. 检查版本兼容性

若Flowbite、Flowbite React与Tailwind CSS版本不匹配，也可能引发样式异常。升级到最新兼容版本：

npm install flowbite@latest flowbite-react@latest

修正后的代码示例 #

<Navbar fluid={true} rounded={false}>
  <Navbar.Brand className='container flex flex-wrap items-center justify-between  mx-auto'>
    <Link to='/' className='flex items-center'>
      <img
        src={Logo}
        className='h-6 mr-3 sm:h-9'
        alt='Flowbite Logo'
      />
      <span className='self-center text-xl font-semibold whitespace-nowrap dark:text-white'>
        Logo here
      </span>
    </Link>
    <div className='hidden lg:block'>
      <Link className='dark:text-white p-5' to='/'>Home</Link>
      <Link className='dark:text-white p-5' to='/academy'>Academy</Link>
      <Link className='dark:text-white p-5' to='/signal'>Signal</Link>
    </div>
    <div className='flex md:order-2'>
      {theme === 'dark' ? (
        <button
          onClick={handleThemeSwitch}
          type='button'
          className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
          Light Mode
        </button>
      ) : (
        <button
          onClick={handleThemeSwitch}
          type='button'
          className='text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
          Dark Mode
        </button>
      )}
    </div>
    {/* 修正：设置空label隐藏默认文本 */}
    <Navbar.Toggle label="" />
    <Navbar.Collapse className='p-5'>
      <Link to='/'>
        <Navbar.Link>Home</Navbar.Link>
      </Link>
      <Link to='/academy'>
        <Navbar.Link>Academy</Navbar.Link>
      </Link>
      <Link to='/signal'>
        <Navbar.Link>Signal Group</Navbar.Link>
      </Link>
    </Navbar.Collapse>
  </Navbar.Brand>
</Navbar>

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