Vue Slotのスタイリング

Vueコンポーネントでスロットをスタイルする方法はありますか？Vue Slotのスタイリング

<slot style="position: absolute"></slot>

と

<slot class="slot"></slot>

動作しません。

出典

2017-11-15 AryanJ-NYC

ラップ<div>のスロットとスタイル代わり<div>：

<div class="wrapper"> 
    <slot></slot> 
</div>

.wrapper > * { 
    color: red; 
}

：あなたが本当にスロット要素のスタイルをする必要がある場合、あなたはこのようなCSSセレクタを使用することができます

<div style="..."> 
    <slot></slot> 
</div>

出典

2017-11-15 21:37:36

ありがとうございました。しかし、複数の要素がスロットに渡された場合、その解決策は機能しません。 –

'.wrapper> *'はすべてのスロット要素を対象とします。特定のスロット要素のみを対象とする必要がある場合は、 '.wrapper> *：nth-child（2）'または '.wrapper> .child'を使用できます。具体的に何をしようとしていますか？各スロット要素の動的 'style'をバインドできるようにしたいのですか、または外部CSSを使用すれば十分でしょうか？ –

外部CSSで十分です。私はあなたのソリューションを明日試し、あなたにアップデートを撃つでしょう。ありがとう！ –

答えて

関連する問題