Sveltekit: Estilizando enlaces activos con $page.path

Estoy trabajando en una aplicación de SvelteKit con un menú lateral que contiene enlaces. No logro que la clase activa se aplique correctamente en mis enlaces.

Los enlaces son componentes en NavLink.svelte:

<script>
  import { page } from '$app/stores';
  import Icon from '$lib/Icon.svelte';
  export let title;
  export let href;
</script></p>

<p><a {href} class="link" class:active={$page.path == href}>
  <Icon {title} />
</a></p>

<p><style>
a.active {
  background-color: rgba(0,0,0,0.24);
</style>
<code>
Estos enlaces se utilizan en **SideNav.svelte**:
</code>
<script>
  import NavLink from '$lib/NavLink.svelte';
</script></p>

<p><nav class="container">
  <div id="links">
    <NavLink href="/link1" title="icon1" />
    <NavLink href="/link2" title="icon2" />
    <NavLink href="/link3" title="icon3" />
  </div>
</nav>
<code>
Y finalmente, el menú lateral se carga en mi **__layout.svelte**:
</code>
<SideNav />
<slot />
<Footer />

Ahora, cuando hago clic en uno de los enlaces del menú lateral, me redirige a la página correcta, pero mi NavLink no tiene el estilo de la clase .active. Sin embargo, si inspecciono el enlace, las herramientas de desarrollo me muestran esto: <a class="link active:true"> y los demás enlaces tienen active:false.

Entonces parece que la función funciona, pero mi estilo activo no se aplica (el color de fondo). ¿Qué me estoy perdiendo?

Intenté mover el código de la clase Active al componente SideNav en lugar del componente NavLink y observé el mismo comportamiento. No pude resolverlo, así que encontré un nuevo método que funciona perfectamente.

En mi NavLink.svelte:

<script>
  import {onMount} from "svelte";
  import Icon from '$lib/Icon.svelte';</p>

<p>let currentPath;
  onMount(() => {
    currentPath = window.location.pathname;
  });
  export let title;
  export let href;
</script></p>

<p><a {href} class:active={currentPath == href}>
  <Icon {title} />
</a>

Y el resto del código es el mismo. Ahora mis enlaces tienen el estilo adecuado. Vale la pena mencionar que simplemente tienen <a class="active"> y no <a class="active:true">. ¿Por qué no funcionaba con el otro método?