Adding Styling to svelte-routing Link tag in svelte js

Question

I wanted to add Styling to the <Link> tag in svelte routing but I couldn't. I have tried to add a class in which there is some styling but it didn't work.

<Link to='/' class='link'></Link>

the class contains:

.link {
   text-decoration: none;
}

Does anyone have a solution for this?

Olenta

Answer 1

The <Link></Link> component represents a html <a></a> tag.

You can use the global svelte-css option:

<style>
    .link > :global(a) {
        text-decoration: none;
    }
    
    :global(a) {
        ...
    }
</style>

See also global-REPL: https://svelte.dev/repl/be432b377c7549e8b60ed10452065f52?version=3.8.1

Another way is to modify the Link.svelte component in the svelte-routing package itself. This can be done inside your node_modules folder or you can fork the repository (https://github.com/EmilTholin/svelte-routing) and do the changes.

Subtile

Thanks! Although it's a bit late to say it. – Olenta

When trying your suggestion, I can't seem to get it work. Setting any styling inside the :global(a){} doesn't get applied and vs code says that it is unused. What am I missing here? – Silicon

@Silicon if you add the :global(a) to the parent's style it should work. For example: .link-wrapper > :global(a) {text-decoration: none;} <div class="link-wrapper"> <Link to='/' class='link'></Link> </div> – Prosthesis

Answer 2

You can use this option:

import { link } from 'svelte-routing';
...
<a href='/' class='link' use:link></a>

this gives you the same behavior and lets you add styles

source: https://github.com/EmilTholin/svelte-routing#link-1

Tearful

Unfortunately it does not give the same behavior. It behaves like an <a> tag by refreshing the page when changing the URL. – Olenta

be sure that you hare using link and not Link – Tearful

this solution is correct. Thanks man – Subsidize

Answer 3

There are some open pull requests about the issue you mentioned:

• https://github.com/EmilTholin/svelte-routing/pull/128
• https://github.com/EmilTholin/svelte-routing/pull/123
• https://github.com/EmilTholin/svelte-routing/pull/116

Maybe try following up on those issues

Cyrie