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

Posted 2023-03-07

【中文标题】在 svelte js 中为 svelte-routing Link 标签添加样式

【英文标题】：Adding Styling to svelte-routing Link tag in svelte js

【发布时间】：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>

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

另一种方法是修改 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>

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

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

【讨论】：

不幸的是，它没有给出相同的行为。通过在更改 URL 时刷新页面，它的行为类似于 <a> 标记。

确保你使用的是link而不是Link

【参考方案3】：

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

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

也许尝试跟进这些问题