样式 Vue 插槽 [英] Styling Vue Slot

问题描述

有没有办法在 Vue 组件中设置插槽的样式?

和

不工作.

解决方案

将插槽包裹在

中，并为

设置样式:

<插槽></插槽>

如果你真的需要设置插槽元素的样式，你可以像这样使用 CSS 选择器:

<插槽></插槽>

.wrapper >* {红色;}

Is there any way to style a slot in a Vue component?

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

and

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

do not work.

解决方案

Wrap the slot in a <div> and style the <div> instead:

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

If you really need to style the slot element, you can use CSS selectors like this:

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

.wrapper > * {
  color: red;
}

这篇关于样式 Vue 插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！