CODEWITHSUNDEEP
sveltesvelte-3
Something Q
Something Q

Reputation: 145

Adding Styling to svelte-routing Link tag in svelte js

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?

Upvotes: 10

Views: 4999

Answers (3)

rogeliosamuel621
rogeliosamuel621

Reputation: 51

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

Upvotes: 5

joshnuss
joshnuss

Reputation: 2047

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

Maybe try following up on those issues

Upvotes: 0

nologin
nologin

Reputation: 1442

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.

Upvotes: 10

Related Questions