20

我将如何做这样的事情：

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

<Nested />

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

4

6 回答 6

15

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

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

<!-- 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 链接上看到它的实际效果

于 2020-01-24T10:08:12.933 回答
10

我能想到的唯一方法是添加一个额外的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如果您使用多个组件，您甚至可以允许类名是动态的并允许使用不同的颜色。这是一个工作示例的链接。

于 2019-07-11T12:51:01.553 回答
9

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

于 2020-07-14T04:21:20.827 回答
7

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

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

在父组件中：

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

<div>
  <Nested />
<div>

嵌套将是蓝色的。

于 2020-05-12T21:43:19.970 回答
3

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

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

也许你会发现一些东西，但这个有效。

于 2019-07-11T12:48:50.960 回答
1

我这样做的方式是这样的：

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

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

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

那里不涉及任何课程或技巧。

于 2021-02-07T15:17:40.707 回答