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

Question

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...

<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>

Check out [this answer](https://stackoverflow.com/a/59894259/10806546) for how to target components. The issue is that `style` is actually being read by Svelte as a prop and not HTML. — micahlt, Mar 02 '22 at 15:38

score 1 · Answer 1 · answered Mar 02 '22 at 15:38

1

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

style="padding: 0 !important"

answered Mar 02 '22 at 15:38

Dor Schreiber

71
9

thanks, but that didn't work – Georg K. Mar 03 '22 at 10:50

score 1 · Answer 2 · answered Mar 02 '22 at 15:45

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.

score 1 · Accepted Answer · answered Mar 04 '22 at 07:52

1

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.

answered Mar 04 '22 at 07:52

Stephane Vanraes

14,343
2
23
41

that's what worked for me! * :global(.bra .smui-accordion__header__title) { padding: 0 !important; } – Georg K. Mar 08 '22 at 15:34

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

3 Answers3