有没有办法让 SPFx 自定义 webpart 占据整个空间？答案

【问题标题】：Is there a way to make an SPFx custom webpart to occupy the whole real estate?有没有办法让 SPFx 自定义 webpart 占据整个空间？
【发布时间】：2021-05-30 18:06:12
【问题描述】：

我使用 SharePoint Online (SPO 2016) 和 SPFx 已有一段时间了，但直到最近全宽 Web 部件发生了一些事情，它们似乎被挤压到了页。显示了一个示例：

在代码上，我添加了支持完全出血为真的选项。一切配置正确，但在浏览器开发工具上检查后，我发现名为 f_b_50a7110f 的某个类具有 margin: auto 属性，现在修复我在代码中添加的问题相同类并给它100％的宽度。 .f_b_50a7110f {width: 100%;}.

这暂时解决了问题，但问题是班级名称会不时更改。例如，在问这个问题时，它被称为 p_i_50a7110f 因此解决方案不成立。有没有人遇到过同样的问题？解决方案是什么？任何帮助将不胜感激。谢谢。这是我的 package.json 文件。

{
  "name": "homepage-global",
  "version": "0.0.1",
  "private": true,
  "main": "lib/index.js",
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@microsoft/sp-core-library": "1.11.0",
    "@microsoft/sp-lodash-subset": "1.11.0",
    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
    "@microsoft/sp-property-pane": "1.11.0",
    "@microsoft/sp-webpart-base": "1.11.0",
    "@pnp/sp": "^2.1.1",
    "@pnp/spfx-controls-react": "2.4.0",
    "materialize-css": "^1.0.0-rc.2",
    "office-ui-fabric-react": "6.214.0",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "react-materialize": "^3.9.7"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/sp-build-web": "1.11.0",
    "@microsoft/sp-module-interfaces": "1.11.0",
    "@microsoft/sp-tslint-rules": "1.11.0",
    "@microsoft/sp-webpart-workbench": "1.11.0",
    "@types/chai": "3.4.34",
    "@types/es6-promise": "0.0.33",
    "@types/mocha": "2.2.38",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "css-loader": "^5.0.1",
    "gulp": "~3.9.1"
  }
}

【问题讨论】：

标签： sharepoint sharepoint-online spfx

【解决方案1】：

默认情况下，SharePoint 框架客户端 Web 部件不能放置在全宽列布局中。要允许用户将您的 Web 部件添加到全角列，请在 Web 部件清单（Web 部件 *.ts 文件旁边的 *.manifest.json 文件）中设置 supportsFullBleed 属性为 true。

{
  //...

  "requiresCustomScript": false,
  "supportsFullBleed": true,

  "preconfiguredEntries": [{
    //...
  }]
}

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/use-web-parts-full-width-column

你也可以使用扩展：

import { override } from '@microsoft/decorators';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';
export interface ISiteFullWidthApplicationCustomizerProperties {
  message: string;
}

require("./css/custom.module.scss");

export default class SiteFullWidthApplicationCustomizer extends BaseApplicationCustomizer<ISiteFullWidthApplicationCustomizerProperties> {

  @override
  public onInit(): Promise<void> {
    if (typeof (Event) === 'function') {
      window.dispatchEvent(new Event('resize'));
    }
    else {
      var resizeEvent = window.document.createEvent('UIEvents');
      resizeEvent.initUIEvent('resize', true, false, window, 0);
      window.dispatchEvent(resizeEvent);
    }

    return Promise.resolve();
  }
}

custom.module.scss：

:global {
 .sp-pageLayout-sideNav [class^='deferredLeftNav'] {
    max-width: 0px;
  }

  .sp-pageLayout-sideNav .SPCanvas-canvas  {
    max-width: 100%;
  }

  .sp-pageLayout-sideNav .CanvasZoneContainer:first-child .CanvasZone.row {
    max-width: 100%;
  }

  .sp-pageLayout-sideNav .CanvasZoneContainer:first-child .CanvasZone.row,
  .sp-pageLayout-sideNav .CanvasZoneContainer:first-child .CanvasZone.row .CanvasSection,
  .sp-pageLayout-sideNav .CanvasZoneContainer:first-child .CanvasZone.row .CanvasSection .ControlZone,
  {
    margin: 0px;
    padding: 0px;
  }

  .sp-pageLayout-sideNav .CanvasZone.row.CanvasZone--alignment.CanvasZone--read.CanvasZone--noMargin {
    margin: auto;
  }

  .sp-pageLayout-sideNav [class^='spInnerCommentsWrapper_'] {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

【讨论】：

【解决方案2】：

我想我会提到我创建了一个 chrome 扩展，它删除了最大宽度限制并使工作台宽度为 1920 像素，并且按比例缩小也可以工作。

https://chrome.google.com/webstore/detail/spfx-workbench-manager/gnchlhbjhljidedhighhkgbfchmejlcp

【讨论】：