How to style components in the Blazor Bootstrap Component library

I've started to use the Blazor Bootstrap Component Library but I'm having trouble overwriting the default css styles being applied.

For example I'm trying to use an accordion

<Accordion Class="px-3"><AccordionItem><TitleTemplate><i class="fa-solid fa-file fa-lg me-3"></i>Documentation</TitleTemplate><Content>                Somthing</Content></AccordionItem></Accordion>

The various components and subcomponents of this control have Class attributes, if I apply some of the standard bootstrap styles to this they appear to take effect, but if I define my own classes and apply them they do not change the appearance of the component. It seems that there is a default class "accordion" that gets applied to the component. How do I override these?

The component library uses scss. This is the default accordion class

.accordion {  // scss-docs-start accordion-css-vars  --#{$prefix}accordion-color: #{$accordion-color};  --#{$prefix}accordion-bg: #{$accordion-bg};  --#{$prefix}accordion-transition: #{$accordion-transition};  --#{$prefix}accordion-border-color: #{$accordion-border-color};  --#{$prefix}accordion-border-width: #{$accordion-border-width};  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};  --#{$prefix}accordion-btn-color: #{$accordion-button-color};  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};  // scss-docs-end accordion-css-vars}

This is a problem I'm experiencing generally with the components in the library. I'm presuming that I can set the variables in this?

How would I do something simple like set the background color for the component?

I have embedded the accordion in another component that has its own component.razor.css file which I have been using to try to get some additional classes applied to the component but have had little success.

I can find no documentation or examples showing me how to style components in this library.