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.