remove padding from accordion

Question

I have a mdbootstrap accordion inside an angular component. By default, it has some padding. I wish to make it smaller. From inspecting the accordion I see that it's made out of a button that has the padding. So in the .scss file of the component where I use the accordion, I do:

accordion-button {
    padding: 0px !important;
}

But it doesn't do anything with and without !important. I checked if the .scss file even works by changing random title color and it does. I think that my value if being overwritten. How can I fix this?

Answer 1

Try this, it worked for me.

::ng-deep .accordion-button {
    border-radius: 0!important;
}