Next.js 14中JSX混合Tailwind与普通类条件分配异常问题咨询

你遇到的情况大概率是Swiper组件自身默认会添加swiperMain类名——不管你外部传入的className是什么，它都会把默认类和你传的类合并渲染到元素上。

验证方法很直接：

• 打开浏览器开发者工具选中该Swiper元素，查看类名列表；再通过React DevTools查看组件的className props，确认你传入的内容是否只有swiperLightbox相关类。如果传入的参数没问题，但元素上多了swiperMain，那肯定是组件内部硬编码添加的。

解决思路：

1. 查阅Swiper组件的文档，看是否有控制默认类名的参数（比如disableDefaultClass这类属性），直接关闭默认类的自动添加。
2. 如果组件没提供这类参数，就手动处理类名：
   • 用模板字符串或类名工具（比如classnames包）动态控制，当lightbox为true时，仅保留你需要的类；若样式冲突，可在CSS中给.swiperLightbox设置更高优先级的样式覆盖.swiperMain。
3. 排查代码其他环节：比如父组件、全局上下文、自定义HOC等是否给该Swiper元素注入了swiperMain类。

另外可以做个快速测试：用普通div替代Swiper组件，用同样的条件类名写法，看是否还会出现多类名的情况，以此快速定位是不是Swiper组件本身的问题。

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