不知道我们如何从导入的组件中删除填充

Question

所以我正在使用 smui-accordion 组件，但我不知道如何删除它的填充！我试过在任何地方填充零但无济于事......

<Accordion style="padding: 0">
<Panel  style="padding: 0" bind:open={reviewAccordion} variant="unelevated">
    <Header  style="padding: 0">
        <h3 style="padding: 0"class="mva">Reviews ({reviews_list.length})</h3>
        <div style="padding: 0" class="flex1"></div>
        <div class="mva" style="padding: 0; height: 20px;"><StarRating rating={rating} config={star_config}/></div>
        <IconButton style="padding: 0" slot="icon" toggle pressed={reviewAccordion}>
            <Icon class="material-icons" on>expand_less</Icon>
            <Icon class="material-icons">expand_more</Icon>
        </IconButton>
    </Header>
    <Content  style="padding: 0">
        {#each reviews_list as review, i}
            <div style="padding: 0"><Review review={review}/></div>
        {/each}
    </Content>
</Panel>

Answer 1

您是否尝试过使用“!important”css 语句？

style="padding: 0 !important"

Answer 2

无需添加所有这些内联，只需在上面添加一个 css 标签即可：

.smui-accordion .smui-accordion__panel > .smui-accordion__header .smui-accordion__header__title {padding: 0}

以上只是手风琴控制台上的内容css...这将覆盖第三方css，您可以控制它。

Answer 3

您可以将 classes 应用于所有 SMUI 组件，因此您可以执行以下操作：

<Accordion class="myclass" />

您只需记住将那些 class 标记为全局。您可能会使用一些实用程序 class 将填充设置为 0，所以这不是什么大问题。

不知道我们如何从导入的组件中删除填充

Can't figure our how to remove padding from imported component

css

svelte

sveltekit