Reading this tread (https://sharepoint.stackexchange.com/questions/240963/add-jquery-in-client-web-part-spfx) I'm going to open a new question with another problem.

I am also following the accordion tutorial from Microsoft docs and trying to customize it using jQuery functions:
[Add jQueryUI Accordion to your SharePoint client-side web part](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part).

Example works fine by following the steps.

Problems come when I want to rewrite (or replace) styles of the default classes to custom colors to my SharePoint Site Theme.

I've read API docs from here:
[Accordion Widget](https://api.jqueryui.com/1.11/accordion/#option-classes).

I added a new class in root level of `JQueryWebPart.module.scss` file (hard-coded red is only for reference and testing purposes).

CSS:

````css
.myAccordionHeaderActive{
    background: red;
}
````

And just added the following line after accordion creation:

Typescript:

```
//Line like shown in the example
jQuery('.accordion', this.domElement).accordion(accordionOptions);
//My New Line
jQuery('.accordion', this.domElement).accordion("option", "classes.ui-accordion-header", styles.myAccordionHeaderActive);
``` 

I think it should work but new red background does not appear.

Obviously, before to come here to ask for help I tried many other ways to do that with this call, following API docs, but couldn't get that.

Typescript:

````
jQuery('.accordion',this.domElement).accordion(accordionOptions).accordion("option", "classes", "ui-accordion-header : ${styles.summarAccordionHeaderActive}");
jQuery('.accordion',this.domElement).accordion("option", "classes", "ui-accordion-header : ${styles.summarAccordionHeaderActive}");
````

None of them work for me.

Thanks in advance.