将样式添加到 svelte js 中的 svelte-routing Link 标签

Question

我想<Link>在 Svelte 路由中将样式添加到标签中，但我不能。我试图添加一个有一些样式的类，但它没有用。

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

该类包含：

.link {
   text-decoration: none;
}

有没有人对此有解决方案？

Answer 1

该<Link></Link>组件代表一个 html<a></a>标签。

您可以使用globalsvelte-css 选项：

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

另见 global-REPL：https ://svelte.dev/repl/be432b377c7549e8b60ed10452065f52 ? version = 3.8.1

另一种方法是修改Link.sveltesvelte-routing 包本身中的组件。这可以在您的 node_modules 文件夹中完成，或者您可以分叉存储库（https://github.com/EmilTholin/svelte-routing）并进行更改。

Answer 2

您可以使用此选项：

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

这给你相同的行为并允许你添加样式

来源： https: //github.com/EmilTholin/svelte-routing#link-1