Javascript when adding SPFx webpart in modern site

Question

I'm trying to figure out how to modify the CSS when a WebPart is added.

The Idea is to span the background of the added Web Part across all columns, let's say the Web Part is added in the left column on a 2 column page. The background would span across all the CanvasZone row. Not just the column where the Web Part is added.

UPDATE:
Here is my code in the render method. I'm working with the HelloWebPart to have something really simple

public render(): void {
    this.domElement.innerHTML = `
      <div class="${ styles.helloWorld }">
        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <span class="${ styles.title }">Welcome to SharePoint!</span>
              <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
              <p class="${ styles.description }">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${ styles.button }">
                <span class="${ styles.label }">Learn some more</span>
              </a>
            </div>
          </div>
        </div>
      </div>`;  
        jQuery(function(){   
          jQuery('.helloWorld_385074c7').closest('div.CanvasZone').css({
          'background-color': 'green'
          });
        });
  }

score 0 · Accepted Answer · answered Jul 05 '18 at 04:35

0

You may try to use jQuery to modify the background, for example:

jQuery(function(){   
        jQuery('.pnpsp_85e6a47f').closest('div.CanvasZone').css({
          'background-color': 'green'
        });

answered Jul 05 '18 at 04:35

Lee

5,305
1
6
12

Ok thanks for the code you provided. However it is more that I don't know where to put JQuery code (like the one above) as in the render of the TypeScript for Web Part it has no effect. Adding the Web Part would add the background. Removing the Web Part would remove it. – DSiconnelli Jul 05 '18 at 16:24
I just insert the code in render function, as the code bind with webpart class jQuery('.pnpsp_85e6a47f'), so the backgroud will be removed after remove web part. – Lee Jul 06 '18 at 01:11
I edited my question with my very simple code. I must say that I'm presI seem to have a problem with JQuery in my render method. I googled and found this post which seems to be related but got no success to make it work. I'm pretty new to SPFx so sorry if this seems to obvious but not for me... https://stackoverflow.com/questions/45407856/spfx-cant-use-jquery – DSiconnelli Jul 06 '18 at 14:50
I was missing the import jQuery in the webpart.ts and in externals in congif.json. Now it's working. :-) – DSiconnelli Jul 06 '18 at 15:52

Javascript when adding SPFx webpart in modern site

1 Answers1