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

【问题标题】：Adding Styling to svelte-routing Link tag in svelte js在 svelte js 中为 svelte-routing Link 标签添加样式
【发布时间】：2020-11-15 18:27:51
【问题描述】：

我想在 svelte 路由中将样式添加到 <Link> 标记，但我做不到。我试图添加一个有一些样式的类，但它不起作用。

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

类包含：

.link {
   text-decoration: none;
}

有人对此有解决方案吗？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

谢谢！虽然说有点晚了。
在尝试您的建议时，我似乎无法让它发挥作用。在 :global(a){} 中设置任何样式都不会被应用，并且 vs 代码说它是未使用的。我在这里错过了什么？
@DannyBoy 如果您将 :global(a) 添加到父母的样式中，它应该可以工作。例如：.link-wrapper > :global(a) {text-decoration: none;}<div class="link-wrapper"> <Link to='/' class='link'></Link> </div>

【解决方案2】：

您可以使用此选项：

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

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

【讨论】：

【解决方案3】：

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

也许尝试跟进这些问题

【讨论】：