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

Question

我想在svelte路由中向<Link>标签添加Styling，但我做不到。我试着添加一个类，其中有一些样式，但没有成功。

<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>

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

另一种方法是修改svelte路由包本身中的Link.svelte组件。这可以在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

Answer 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

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