如何修改Svelte Flowbite中TabItem组件的样式？

问题根源 #

直接给TabItem加class仅作用于外层<li>元素，但Flowbite Tab组件的文字是放在<li>内部的<button>里的：

• 文字颜色不生效：默认样式给<button>设置了更高优先级的颜色属性，<li>的text-*类无法穿透到内部按钮
• 背景仅在underline模式生效：非underline模式下，<button>占满了<li>的空间，<li>的背景被按钮遮挡，只有underline模式下<li>的背景区域才会暴露出来

解决方案 #

方案1：Svelte样式穿透（推荐） #

在组件的<style>标签里用:global()选择器精准命中内部元素，避免全局样式污染：

<style>
  .custom-tab-group :global(li) {
    @apply bg-red-500;
  }
  .custom-tab-group :global(button) {
    @apply text-yellow-200;
  }
  /* 可选：单独设置激活状态的样式 */
  .custom-tab-group :global(li.active button) {
    @apply text-yellow-200 bg-red-500;
  }
</style>

<Tabs class="custom-tab-group">
  <TabItem open title="My tab item">
    <!-- 标签内容 -->
  </TabItem>
</Tabs>

方案2：组件专属Props（若版本支持） #

部分Svelte Flowbite版本的TabItem支持buttonClass属性，可直接给内部按钮加类：

<TabItem 
  open 
  title="My tab item" 
  class="bg-red-500" 
  buttonClass="text-yellow-200"
>

方案3：强制优先级（应急用） #

用Tailwind的!前缀强制覆盖默认样式：

<TabItem open title="My tab item" class="bg-red-500 !text-yellow-200">

效果对比 #

实际效果：

预期效果：

内容的提问来源于stack exchange，提问作者Lirit