Using JQuery with SharePoint Framework

Question

Reading this tread (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.

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.

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

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.

Answer 1

Your TS code looks correct:

jQuery('.accordion', this.domElement).accordion("option", "classes.ui-accordion-header", styles.myAccordionHeaderActive);

Try using 'important' in your CSS class definition

.myAccordionHeaderActive{
    background: red !important;
}

Answer 2

I have found a tricky solution. It's ugly and dirty, but works.

What I have done is rewrite JQuery CSS classes right before render the accordion in the html DOM.

TypeScript: (Original example from MS Docs)

public render(): void {
  this.domElement.innerHTML = MyAccordionTemplate.templateHtml;

  const accordionOptions: JQueryUI.AccordionOptions = {
    animate: true,
    collapsible: false,
    icons: {
      header: 'ui-icon-circle-arrow-e',
      activeHeader: 'ui-icon-circle-arrow-s'
    }
  };

  jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

TypeScript: (My additions)

public render(): void {
  //rewrite some accordion css classes properties
  this.domElement.innerHTML = `<style type="text/css">
        .ui-state-default{
          background: none;
        }
        .ui-state-hover .ui-icon,
        .ui-state-default .ui-icon{
          background-image: none;
        }

        .ui-accordion-header-active{
          background: #0078d4;
          color: white;
        }

      </style>`;
  //Concatenate original example
  this.domElement.innerHTML += MyAccordionTemplate.templateHtml;

  const accordionOptions: JQueryUI.AccordionOptions = {
    animate: true,
    collapsible: false,
    icons: {
      header: 'ui-icon-circle-arrow-e',
      activeHeader: 'ui-icon-circle-arrow-s'
    }
  };

  jQuery('.accordion', this.domElement).accordion(accordionOptions);
}

Hope someone else find the correct use of JQuery Library or realizes what is the issue cause.

Answer 3

I've made a better workaround so I can apply theme colors to accordion. Which is what I wanted to do when I opened this thread.

Instead of writing the style directly in the DOM.innerhtml, I've create a new CSS file (not SCSS, just CSS) and set colors using theme tokens.

AccordionMyStyles.css (for example)

.ui-state-default{
    background: none;
    color: white;
}

.ui-state-hover .ui-icon,
.ui-state-default .ui-icon{
  background-image: none;
}

.ui-accordion-header{
  background-color: "[theme: themePrimary, default: #0078d4]"; 
  font-weight: bold;
}

.ui-accordion-header-active {
  background-color: "[theme: themeTertiary, default: #71afe5]"; 
  color: #222222;
}

In .ts WebPart main file, import AccordionMyStyles.css file using require

require('./AccordionMyStyles.css');

And that worked for me and covered my needs. Hope it to be useful to someone else.