SharePoint SPFx 扩展可在团队网站上实现全宽

Question

我创建了一个 SPFx 扩展，其目的是显示团队网站的全角视图部分。我的扩展允许我覆盖页面上的任何元素。我现在只需要编写允许我执行此操作的 css，但是我在查找需要覆盖的确切类时遇到问题。我的问题是：

我需要编辑哪个类才能使部分显示在 100% 的屏幕上？

Answer 1

您可以尝试在 SharePoint Online 中使用具有全宽列或单部分应用程序页面的 SharePoint 框架 (SPFx) Web 部件。

查看这些微软官方文档：

1. 使用带有全宽列的 Web 部件
2. 在 SharePoint Online 中使用单部分应用程序页面

---

您可以通过检查 DOM 元素以获取所需的类并使用自定义 CSS 覆盖这些类来实现您的要求。

但是，Microsoft 不推荐此类 DOM 操作和 CSS 自定义，如果 Microsoft 将来在新的 SharePoint 版本更新中更改 HTML 元素类，您的某些自定义可能会在将来中断。

检查相关主题：如何在多个 SharePoint 现代页面上包含相同的 JS 和 CSS 文件？

Answer 2

在通信共享点网站上，以全角查看页面没有问题。

在团队网站上有点棘手。 对我来说，这有效：

• 编辑project_name/src/webparts/webpart_name下的.scss文件：

:global {
      #workbenchPageContent,.CanvasComponent.LCS .CanvasZone {
        min-width: 100% !important;
      }
    }

• 将该 .scss 文件包含在主反应文件中
• 在您的配置中启用全出血支持

  • 在 /src/webparts/webpart_name 下的 manifest.json 文件中，添加以下行：

    “supportedHosts”：[“SharePointWebPart”，“TeamsPersonalApp”，“TeamsTab”， "SharePointFullPage"], “支持FullBleed”：正确，