Tailwind导航栏按钮在小屏幕下失效问题求助

以下是针对你代码中导致小屏幕导航按钮失效、样式异常的问题修复方案：

1. 修正React元素的class属性为className #

React中必须使用className而非class，否则样式不会生效。修改Header组件中的class为className：

const Header = () => {
  return (
    <>
      <div className='w-full bg-center bg-cover h-[32rem]' style={sectionStyle}>
        <NavBar />
        <section className='flex flex-1 justify-center '>
          <div className='flex flex-col w-auto items-center '>
            <h1 className='header-text text-5xl font-extrabold text-center lg:text-7xl 2xl:text-8xl '>
              <span className='text-transparent bg-gradient-to-br bg-clip-text from-blue-500 via-pink-500 to-red-500 dark:from-teal-200 dark:via-indigo-300 dark:to-sky-500 '>
                Your World
              </span>
            </h1>

            <h1 className='text-5xl font-extrabold text-center lg:text-7xl 2xl:text-8xl'>
              <span className='text-transparent bg-gradient-to-tr bg-clip-text from-blue-500 via-pink-500 to-red-500 dark:from-sky-300 dark:via-pink-300 dark:to-red-500'>
                Guide
              </span>
            </h1>
          </div>
        </section>
      </div>
    </>
  );
};

2. 解决NextUI Link与React Router不兼容问题 #

你使用了@nextui-org/react的Link，但误用了React Router的to属性，NextUI的Link默认使用href，若要兼容React Router，建议直接导入React Router的Link组件：

// 导入React Router的Link，移除@nextui-org/react中的Link导入
import { Link } from 'react-router-dom';

修改CountryHeader中的登录/注册链接：

<Link
  to='/login'
  className='hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'
>
  <Typography color={'white'} fontSize={'14px'}>
    Login
  </Typography>
</Link>
<Link
  to='/register'
  className='text-gray-100 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium'
>
  <Typography color={'white'} fontSize={'14px'}>
    Sign Up
  </Typography>
</Link>

3. 修正Sign Out按钮的事件绑定 #

按钮误用了React Native的onPress属性，且直接执行onLogout()会导致组件渲染时就触发登出。改为React标准的onClick属性并传递函数：

<Menu.Item>
  {({ active }) => (
    <button
      onClick={() => onLogout()}
      className={classNames(
        active ? 'bg-gray-100' : '',
        'block px-4 py-2 text-sm text-gray-700'
      )}
    >
      Sign out
    </button>
  )}
</Menu.Item>

4. 解决小屏幕元素覆盖问题 #

左侧绝对定位的按钮区域可能被其他元素遮挡，为导航栏添加z-50确保层级最高：

<Disclosure as='nav' style={{ minHeight: '11vh', background: '#826644' }} className="z-50">

同时调整小屏幕下的Logo与按钮布局，避免绝对定位导致的挤压：

<div className='flex items-center sm:hidden'>
  <SendIcon className='h-6 w-6 text-white mr-2' />
  <Link to='/'>
    <strong className='text-xl text-white font-bold'>
      Geopilot
    </strong>
  </Link>
  {/* Mobile menu button*/}
  <Disclosure.Button className='ml-auto inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'>
    <span className='sr-only'>Open main menu</span>
    {open ? (
      <XMarkIcon className='block h-6 w-6' aria-hidden='true' />
    ) : (
      <Bars3Icon className='block h-6 w-6' aria-hidden='true' />
    )}
  </Disclosure.Button>
</div>

5. 完善移动端菜单内容 #

当前navigation数组为空，移动端菜单展开后无内容，若需要显示菜单，补充菜单项：

const navigation = [
  { name: 'Home', href: '/', current: true },
  { name: 'Countries', href: '/countries', current: false },
  // 按需添加其他菜单项
];

完成以上修改后，小屏幕下的导航按钮、链接应该能正常触发，样式也会正确显示。

内容的提问来源于stack exchange，提问作者Ventrity Customer Service