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?
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.
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
There are some open pull requests about the issue you mentioned:
Maybe try following up on those issues