Sharepoint 在现代网站中添加SPFx Web部件时使用Javascript

我正试图弄清楚在添加Web部件时如何修改CSS

这样做的目的是跨越所有列中添加的Web部件的背景，假设Web部件添加在2列页面的左列中。背景将横跨整个CanvasZone行。不仅仅是添加Web部件的列

更新：
这是我在render方法中的代码。我正在和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'
          });
        });
  }

public render（）：void{
this.doElement.innerHTML=`
欢迎使用SharePoint！
使用Web部件自定义SharePoint体验
${escape（this.properties.description）}
`;  
jQuery（函数（）{
jQuery（'.helloWorld_385074c7'）.closest（'div.CanvasZone'）.css({
“背景色”：“绿色”
});
});
}

您可以尝试使用jQuery修改背景，例如：

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

---

好的，谢谢您提供的代码。然而，更重要的是，我不知道将JQuery代码（如上面的代码）放在哪里，因为在Web部件的TypeScript呈现中，它没有效果。添加Web部件将添加背景。删除Web部件会将其删除。我只是在render函数中插入代码，因为代码与Web部件类jQuery（'.pnpsp_85e6a47f'）绑定，所以在删除Web部件后背景将被删除。我用非常简单的代码编辑了我的问题。我必须说，我很抱歉，我的渲染方法中的JQuery似乎有问题。我在谷歌上搜索并找到了这篇文章，这篇文章似乎有关联，但没有成功。我是SPFx的新手，所以很抱歉，如果这看起来很明显，但对我来说不是。。。我在webpart.ts和congif.json的externals中缺少import jQuery。现在它开始工作了。：-）