Conditional CSS类修复：首页shrinkMenu生效时背景样式异常问题

问题根源是原代码中首页的背景样式被重复设置，当isHome和shrinkMenu同时为true时，bg-transparent和目标背景类会同时存在（虽然CSS优先级可能让后者生效，但冗余且易引发样式冲突）。可以通过合并背景逻辑彻底解决：

<div
  className={clsx(
    // 高度样式保留原有逻辑
    shrinkMenu ? 'lg:min-h-header-sm' : 'lg:min-h-header-lg',
    // 边框样式：首页用白色半透边框，非首页用深色半透边框
    isHome ? 'border-white/40' : 'border-dark/20',
    // 背景样式：首页根据shrinkMenu切换，非首页固定背景色
    isHome 
      ? (shrinkMenu ? 'bg-[color:rgb(var(--color-header-bg))]' : 'bg-transparent') 
      : 'bg-[color:rgb(var(--color-header-bg))]'
  )}
>

优化细节说明： #

• 把首页的背景判断合并为一个三元表达式，避免同时生成冲突的背景类
• 边框样式单独提取，逻辑更清晰，无需重复判断isHome
• 整体结构简洁，每个条件只负责一类样式，减少冗余代码

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