Javascript при добавлении веб-части SPFx на современный сайт

Question

Я пытаюсь выяснить, как изменить CSS при добавлении веб-части.

Идея состоит в том, чтобы охватить фон добавленной веб-части по всем столбцам, скажем, веб-часть добавлена ​​в левый столбец на странице с 2 столбцами. Фон будет охватывать всю строку CanvasZone. Не только столбец, в который добавляется веб-часть.

UPDATE:
Вот мой код в методе рендеринга. Я работаю с HelloWebPart, чтобы иметь что-то действительно простое

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'
          });
        });
  }

Answer 1

Вы можете попробовать использовать jQuery для изменения фона, например:

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