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

【问题标题】：How to target a component in svelte with css?如何使用 css 定位 svelte 中的组件？
【发布时间】：2019-11-21 03:27:45
【问题描述】：

我该怎么做这样的事情：

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

<Nested />

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

【问题讨论】：

什么父母？我在这里没有看到父母。
只需将一个类添加到您的嵌套组件<Nested class="custom"/>。 stackoverflow.com/q/42765262/6809926
@AntoineF 在苗条中不起作用。我认为它认为类是一个属性。
@MarkSchultheiss 是父代码中的代码。

标签： javascript svelte svelte-component

【解决方案1】：

我看了看，没有发现任何相关的东西（可能是here），所以这里是在您的自定义组件周围添加<div> 的替代方法。

<style>
.Nested {
    color: blue;
}
</style>
<div class="Nested">
   <Nested />
</div>

也许你会找到一些东西，但这个有用。

【讨论】：

这种方法在整个Nested 组件上设置color: blue。我在下面提供了一个答案，它允许您定位 Nested 中的某些元素。
@MikeNikles 不错，我 20 分钟前才发现苗条，我不知道这个。
你有一个很好的发现:)！我已经使用了一段时间，但我也花了很多时间才弄清楚这一切如何与样式嵌套组件一起使用。
样式标签内的.是否需要？
是的，因为您不再针对Nested 组件而是上面的 div 类，因此在 CSS 中您需要使用点来触发它。

【解决方案2】：

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

App.svelte

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

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

<div>
    <Nested />  
</div>

Nested.svelte

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

多个嵌套元素

如果您使用多个Nested 组件，您甚至可以允许类名是动态的并允许使用不同的颜色。这是link to a working example。

【讨论】：

我看到你使用 :global 所以它不仅针对嵌套组件内部，还针对 div 内部的所有类style-in-parent。我试过了here.
嗯，不错，不错。我认为下一步是更好地了解您的用例以及为什么尝试从父组件设置样式。

【解决方案3】：

您需要使用 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 元素，而不影响任何其他类或本机元素。你可以看到它在行动at this REPL link

【讨论】：

【解决方案4】：

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

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

在父组件中：

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

<div>
  <Nested />
<div>

嵌套将是蓝色的。

【讨论】：

【解决方案5】：

您可以使用内联样式和 $$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>

REPL

【讨论】：

Nested.svelte 的单线：<div style={$$props.style}>
这似乎正是 OP 所要求的，这样做有什么缺点吗？看起来很直接！
@MartinGunnarsson 如果您使用库组件怎么办？那你得去源码里面给div添加props
@cikatomo 在您看来，对于像npmjs.com/package/@bojalelabs/headless-svelte-ui 这样的无头库组件，什么是一个好的解决方案，以便我们能够向 div 添加道具？
@ayoluwaalfonso 抱歉，我真的不知道

【解决方案6】：

我的做法是这样的：

<style lang="stylus">
  section
    // section styles

    :global(img)
    // image styles
</style>

这会生成像 section.svelte-15ht3eh img 这样的 css 选择器，它只影响 section 标签的子 img 标签。

其中不涉及任何课程或技巧。

【讨论】：