在现代站点中添加 SPFx webpart 时的 Javascript

Posted 2023-03-27

【中文标题】在现代站点中添加 SPFx webpart 时的 Javascript

【英文标题】：Javascript when adding SPFx webpart in modern site

【发布时间】：2018-12-12 23:33:57

【问题描述】：

我试图弄清楚如何在添加 WebPart 时修改 CSS。

想法是将添加的 Web 部件的背景跨越所有列，假设 Web 部件添加到 2 列页面的左列中。背景将跨越所有 CanvasZone 行。不仅仅是添加 Web 部件的列。

更新： 这是我在渲染方法中的代码。我正在使用 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'
          );
        );
  

【参考方案1】：

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

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

【讨论】：

好的，感谢您提供的代码。然而，更多的是我不知道将 JQuery 代码（如上面的代码）放在哪里，因为它在 Web 部件的 TypeScript 的渲染中没有任何效果。添加 Web 部件将添加背景。删除 Web 部件会将其删除。

我只是在render函数中插入代码，因为代码与webpart类jQuery('.pnpsp_85e6a47f')绑定，所以删除web part后背景将被删除。

我用非常简单的代码编辑了我的问题。我必须说我很pres我的render方法中的JQuery似乎有问题。我用谷歌搜索，发现这篇文章似乎是相关的，但没有成功让它发挥作用。我对 SPFx 很陌生，如果这似乎很明显但对我来说不是很抱歉...***.com/questions/45407856/spfx-cant-use-jquery

我在 webpart.ts 和 congif.json 的 externals 中缺少导入 jQuery。现在它正在工作。 :-)