Theming support via classes?

It doesn’t seem like <Link/> class tag is working? If not, are there other ways to theme <Link/>?

[EmilTholin]

Hi @kamiyaa!

Like @ronvdberkmortel pointed out the getProps prop function is used to give the underlying anchor tag custom attributes, but I will have to consider if all the extra props on the Link should be spread on the anchor tag as well for simplicity’s sake. I’m not quite sure if there are any drawbacks to that at the moment, but I will look into it.

[ronvdberkmortel]

I had the same problem and ended up using a NavLink component to add the relevant classes. Props to Emil for the package and the example that provided the base code. Since I am using Bootstrap 4 in combination with svelte-routing, I wanted to add the base nav-link class and conditionally add the active class.

components/NavLink.svelte

<script>
  import { Link } from "svelte-routing";

  export let to = "";

  function getProps({ location, href, isPartiallyCurrent, isCurrent }) {
    const isActive = href === "/" ? isCurrent : isPartiallyCurrent || isCurrent;

    // The object returned here is spread on the anchor element's attributes
    if (isActive) {
      return { class: "nav-link active" };
    }
    return { class: "nav-link" };
  }
</script>

<Link {to} {getProps}>
  <slot />
</Link>

App.svelte

  import NavLink from "./components/NavLink.svelte";
  ...
          <li class="nav-item">
            <NavLink to="/">Home</NavLink>
          </li
  ...

Hopefully this is useful to you and other users of the package.