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

user_10729772 0
Viewed 156

So I'm using the smui-accordion component and I just can't figure out how to remove it's padding! I've tried putting everywhere zero padding but to no avail... Padding suffering

<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>
sveltekit svelte css
3 Answers

Have you tried to use "!important" css statement?

style="padding: 0 !important"
user_179537330

Instead of adding all those inline just add a css tag above:

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

Above is just whats on console from the accordion css...This will overwrite the third party css and you can have control over it.

user_11818970

You can plasses classes to all SMUI components, so you can do something like:

<Accordion class="myclass" />

All you have to remember is to mark those classes as global. You would probably use some utility class for setting padding to 0, so this is not so much of a problem.

user_119561070
Related