如何移除Flowbite Svelte最新版本中AccordionItem的内边距？

方案1：使用组件自带的自定义类属性（推荐） #

Flowbite Svelte的AccordionItem组件支持通过contentClass属性直接设置内容容器的样式，无需全局样式或复杂选择器：

<Accordion>
  <AccordionItem contentClass="p-0">
    {#snippet header()}My Header{/snippet}
    <p>My content here…</p>
  </AccordionItem>
  <!-- 更多项 -->
</Accordion>

方案2：使用更精准的组件内全局样式 #

如果方案1不生效，可通过浏览器开发者工具查看内容容器的实际类名（Flowbite 1.2.0中通常为accordion-content），然后编写更精准的选择器：

<Accordion class="my-accordion">
  <AccordionItem>
    {#snippet header()}My Header{/snippet}
    <p>My content here…</p>
  </AccordionItem>
</Accordion>

<style>
  :global(.my-accordion .accordion-content[data-accordion-content]) {
    @apply p-0 !important;
  }
</style>

方案3：全局CSS中提升选择器优先级 #

修改你之前的全局样式，通过组合默认类名与自定义类名提升优先级：

/* app.css */
@layer components {
  .no-pad-accordion .accordion-content[data-accordion-content] {
    @apply p-0 !important;
  }
}

然后将组件包裹在自定义类容器中：

<div class="no-pad-accordion">
  <Accordion>
    <AccordionItem>
      {#snippet header()}My Header{/snippet}
      <p>My content here…</p>
    </AccordionItem>
  </Accordion>
</div>

为什么之前的方法没生效？ #

• 选择器优先级不足：Flowbite的默认样式可能使用了更具体的选择器，或在更高优先级的CSS层中定义
• 属性匹配不精准：仅通过[data-accordion-content]定位可能无法覆盖组件自带的类样式

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