如何自定义SharePoint Viva Connections上的Viva Engage公司源样式？

两种自定义实现路径 #

路径一：SPFx开发全自定义Web部件（推荐，稳定性高） #

1. 准备开发环境

确保本地安装：

• Node.js 16.x/18.x（匹配SPFx当前版本要求）
• Yeoman 和 SharePoint Generator：npm install -g yo @microsoft/generator-sharepoint
• Gulp CLI：npm install -g gulp-cli

2. 初始化SPFx项目

执行命令：

yo @microsoft/sharepoint

• 选择「Web Part」类型
• 命名项目（如CustomVivaEngageFeed）
• 选择React作为开发框架（便于灵活定制UI）

3. 配置Graph API权限

在项目根目录的config/package-solution.json中添加权限声明：

"webApiPermissionRequests": [
  {
    "resource": "Microsoft Graph",
    "scope": "Group.Read.All"
  },
  {
    "resource": "Microsoft Graph",
    "scope": "User.Read.All"
  }
]

部署后需租户管理员在SharePoint管理中心批准这些权限。

4. 调用Viva Engage API拉取内容

使用@microsoft/microsoft-graph-client库调用Graph API获取帖子数据：

import { MSGraphClient } from '@microsoft/sp-http';

// 在React组件中获取Graph客户端
this.context.msGraphClientFactory.getClient()
  .then((client: MSGraphClient) => {
    // 调用Viva Engage社区帖子接口（示例）
    client.api('/teams/{community-team-id}/channels/{channel-id}/messages')
      .get((error, response: any) => {
        // 处理返回的帖子数据集
      });
  });

5. 实现自定义UI样式

在React组件中渲染目标布局：

• 帖子容器设置圆角：style={{ borderRadius: '8px', border: '1px solid #eaeaea', overflow: 'hidden' }}
• 顶部展示帖子大图：通过API返回的附件URL渲染<img>标签
• 下方展示公司Logo/名称：从站点属性或Graph组织信息接口获取数据
• 底部渲染标题、作者（从帖子from字段提取用户信息）、互动按钮（绑定点赞/评论的Graph API调用）

6. 打包部署

执行命令生成部署包：

gulp bundle --ship
gulp package-solution --ship

将生成的.sppkg文件上传到租户应用商店，之后在目标SharePoint站点添加该自定义Web部件即可。

路径二：注入自定义CSS修改默认Web部件（轻量方案，适合快速调整） #

若不想开发全自定义Web部件，可通过SPFx应用自定义器注入CSS覆盖默认样式：

1. 初始化SPFx应用自定义器项目
2. 在onInit方法中注入自定义样式：

import { override } from '@microsoft/decorators';
import { BaseApplicationCustomizer } from '@microsoft/sp-application-base';

export default class CustomVivaEngageStylesApplicationCustomizer
  extends BaseApplicationCustomizer<void> {

  @override
  public onInit(): Promise<void> {
    const css: string = `
      .ms-FeedItem {
        border-radius: 8px !important;
        overflow: hidden;
        margin-bottom: 16px;
      }
      .ms-FeedItem-image {
        width: 100%;
        height: auto;
      }
      /* 根据需求添加其他样式调整 */
    `;
    const head: HTMLElement = document.getElementsByTagName('head')[0];
    const style: HTMLElement = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    head.appendChild(style);
    return Promise.resolve();
  }
}

3. 部署应用自定义器到目标站点即可生效。注意：微软可能会更新默认Web部件的DOM结构，该方案稳定性相对较低。

内容的提问来源于stack exchange，提问作者Kentucker