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?

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.

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