如何在 SPFx 1.10 中将 Web 部件的宽度填充为全屏宽度？

Question

我在 https://localhost:4321/temp/workbench.html 上安装了带有 React 模板的 SharePoint 框架 SPFx 1.10 运行并尝试在“WebPartName.manifest.json”文件中插入 "supportsFullBleed": true 但它没有扩展宽度。

此外，我评论了 SCSS 导入库和 HTML 模板代码：

import * as React from 'react';
// import styles from './TestSpfx.module.scss';
import { ITestSpfxProps } from './ITestSpfxProps';
import ItemListAPI from './ItemListAPI';

export default class TestSpfx extends React.Component<ITestSpfxProps, {}> {
  public render(): React.ReactElement<ITestSpfxProps> {
    return (
      <div>
        <ItemListAPI />
      </div>
      // <div className={styles.testSpfx}>
      //   <div className={styles.container}>
      //     <div className={styles.row}>
      //       <div className={styles.column}>
      //         <span className={styles.title}>Testing Fluent UI</span>
      //         <ItemListAPI />
      //         {this.props.description}
      //       </div>
      //     </div>
      //   </div>
      // </div>
    );
  }
}

但是结果还是一样。有人知道如何将 Web 部件填充到全屏宽度吗？

Answer 1

使用这个link：https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/use-web-parts-full-width-column

阅读页面末尾的注释。 Workbench 不支持在全宽列布局中测试 Web 部件。相反，您必须将您的 Web 部件部署到开发人员租户，创建一个通信网站，并在那里测试您的 Web 部件。

Answer 2

只是想我会提到我创建了一个 chrome 扩展，它删除了最大宽度限制并使 workbench 1920px 宽度，同时缩小工作。

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

如何在 SPFx 1.10 中将 Web 部件的宽度填充为全屏宽度？

How do I fill the width of the web part into full screen width in SPFx 1.10?

sharepoint

typescript

reactjs

spfx