在 svelte js 中为 svelte-routing Link 标签添加样式

Question

我想在 svelte 路由中将样式添加到 <Link> 标记，但我不能。 我试图添加一个 class，其中有一些样式，但它没有用。

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

class 包含：

.link {
   text-decoration: none;
}

有人对此有解决方案吗？

Answer 1

<Link></Link> 组件表示 html <a></a> 标签。

您可以使用 global svelte-css 选项：

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

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

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

Answer 2

关于您提到的问题有一些开放的拉取请求：

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

也许可以尝试跟进这些问题

Answer 3

您可以使用此选项：

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

这会为您提供相同的行为并允许您添加样式

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