如何使用css定位svelte中的组件？

Question

我将如何做这样的事情：

<style>
Nested {
    color: blue;
}
</style>

<Nested />

即如何将样式应用到组件的父组件？

Answer 1

您需要使用 export let 将 props 传递给父组件，然后将这些 props 绑定到子组件中的类或样式。

您可以在要动态设置样式的子元素上放置一个样式标签，并使用您为父元素导出的变量来直接确定样式的值，然后在标签上分配颜色，如下所示：

<!-- in parent component -->

<script>
import Nested from './Nested.svelte';
</script>

<Nested color="green"/>

<!-- in Nested.svelte -->

<script>
export let color;
</script>

<p style="color: {color}">
    Yes this will work
</p>

如果您只有一两种样式要调整，这里的优点是灵活性，缺点是您将无法从单个道具调整多个 CSS 属性。

或者

您仍然可以使用 :global 选择器，但只需向在子元素中设置样式的元素添加一个特定的引用，如下所示：

<!-- in parent component -->

<script>
import Nested from './Nested.svelte';
</script>

<Nested ref="green"/>

<style>
:global([ref=green]) {
    background: green;
    color: white;
    padding: 5px;
    border-radius: .5rem;
}
</style>

<!-- in Nested.svelte -->

<script>
export let ref;
</script>

<p {ref}>
    Yes this will work also
</p>

这确保 global 只影响它所针对的子元素中的确切 ref 元素，而不影响任何其他类或本机元素。你可以在这个 REPL 链接上看到它的实际效果

Answer 2

使用:global(*)是最简单的解决方案。

例如，如果您想设置所有直接子级的样式，则无需在子级中指定类

在父组件中：

<style>
  div > :global(*) {
    color: blue;
  }
<style>

<div>
  <Nested />
<div>

嵌套将为蓝色。

Answer 3

您可以使用内联样式和 $$props ...

<!-- in parent component -->

<script>
import Nested from './Nested.svelte';
</script>

<Nested style="background: green; color: white; padding: 10px; text-align: center; font-weight: bold" />

<!-- in Nested.svelte -->

<script>
    let stylish=$$props.style
</script>

<div style={stylish}>
    Hello World
</div>

复制代码

Answer 4

我能想到的唯一方法是添加一个额外的div元素。

App.svelte

<script>
    import Nested from './Nested.svelte'    
</script>

<style>
    div :global(.style-in-parent) {
        color: green;
    }
</style>

<div>
    <Nested />  
</div>

嵌套.svelte

<div class="style-in-parent">
    Colored based on parent style
</div>

多个嵌套元素

如果您使用多个Nested组件，您甚至可以允许类名是动态的并允许使用不同的颜色。这是一个工作示例的链接。

Answer 5

2023 年更新，您可以将样式标签包装在 svelte:head 中，这会将它们放在 head 中，将它们从范围上下文中删除。

<svelte:head>
  <style>
    div { color: red };
  </style>
</svelte:head>

此代码片段将使所有 div 元素的颜色为“红色”。因此，我建议谨慎使用它（我可能只会以传统方式将它用于脚本/内容）。只是因为对于具有重要路线的项目来说，调试“为什么一切都是红色的”是不可能的。

iirc，“记录”方式是通过 CSS 变量。

<!-- Nested.svelte -->
<div>
  <slot />
</div>

<style>
  div { color: var(--nested-color, inherit); }
</style>

===

<!-- Parent.svelte -->
<div>
  <Nested>
    Applesauce
  </Nested>
</div>

<style>
  div {
    --nested-color: red;
  }
</style>