Conditional CSS class fix

Question

I have many pages, and the home page, if i am in the homepage, i want to make the bg transparent, if the shrink menu is true make it solid (bg-[color:rgb(var(--color-header-bg))]), if i am in other pages make the bg bg-[color:rgb(var(--color-header-bg))] no matter what

  <div
          className={clsx(
            shrinkMenu ? 'lg:min-h-header-sm' : 'lg:min-h-header-lg',
            isHome
              ? 'border-white/40 bg-transparent'
              : 'border-dark/20 bg-[color:rgb(var(--color-header-bg))]',
            isHome && shrinkMenu
              ? 'bg-[color:rgb(var(--color-header-bg))]'
              : 'bg-transparent',
          )}
        >

The issue is in homepage, bg-transparent persists even shrinkmenu is true, how can I improve this code?

Answer 1

I think you just need to have your conditions in a different order:

<div
  className={clsx(
    isHome && shrinkMenu
      ? 'lg:min-h-header-sm bg-[color:rgb(var(--color-header-bg))]'
      : isHome
      ? 'lg:min-h-header-sm bg-transparent'
      : 'lg:min-h-header-lg bg-[color:rgb(var(--color-header-bg))]'
  )}
>

CSS classes that are applied to an element are processed from left to right and the last class that's applied takes precedence. In your code the condition for isHome and shrinkMenu to both be true came after the condition for isHome alone. Therefore the bg-transparent class was applied last (after the bg-[color:rgb(var(--color-header-bg))] class) and took precedence, making the background transparent even when shrinkMenu is true.