在 Microsoft Graph Toolkit 中使用不同的配置文件图像大小

Question

在我的 MGT React SharePoint WebPart 中，我希望一些配置文件图像以大尺寸 (48 像素) 显示，而其他图像以中等尺寸 (36 像素) 显示。

我知道可以使用属性 avatarSize，但这仅支持 Small、Large 或 Auto。在 mgt-person css 类中，我可以指定 --avatar-size: 36px。但是由于这个 css 类会影响页面上的所有人物组件，所以现在所有的个人资料图像的大小都是 36 像素。并且不支持在 person 组件本身上指定 css 类。

你知道这是否可以通过其他方式实现吗？

更新： 在这篇文章的帮助下，我自己解决了这个问题： https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-4-customizing-components/

使用我的 scss 文件中的以下定义，它可以根据例如 WebPart 属性调整头像大小：

  .personsmall mgt-person {
    --avatar-size: 24px;
  }
  .personmedium mgt-person {
    --avatar-size: 36px;
  }
  .personlarge mgt-person {
    --avatar-size: 48px;
  }

在我的 tsx 文件中，它看起来像这样：

  public render(): React.ReactElement<IRolesProps> {
    let cf: CommonFunctions = new CommonFunctions();

    return (
      <div className={this._getAvatarSizeClass(this.props.roleSize)}>
        {this.props.roles && this.props.roles.map((val) => {
          return (
            <Stack className={styles.roleSpacing}>
              <Text className={styles.roleHeader} variant="xLarge">{val.role}</Text>
              <Person userId={val.person} view=PersonViewType.twolines fetchImage={true} showPresence={true}
                personCardInteraction={PersonCardInteraction.hover} line2Property="mail"></Person>
            </Stack>);
        })}
      </div>
    );
  }

  private _getAvatarSizeClass(avatarSize: AvatarSize): any {
    if (avatarSize) {
      switch (avatarSize) {
        case AvatarSize.Small:
          return styles.personsmall;
        case AvatarSize.Medium:
          return styles.personmedium;
        case AvatarSize.Large:
          return styles.personlarge;

        default:
          break;
      }
    }
  }

希望这可以帮助其他人解决这个问题。

Answer 1

有一个造型指南：MGT Styling guide

您可以简单地创建一个 CSS 规则并调用所需的组件。样式指南中的示例

mgt-person {
  --avatar-size: 34px;
}

因此，您应该能够将其与 CSS 类结合起来，例如：

mgt-person.my-avatar-size {
  --avatar-size:42px;
}

由于所有React components 都暴露了className 属性，这应该可以工作：

<Person className='my-avatar-size'></Person>

更新

由于某种原因，没有可用的className 属性，为什么不使用data- 属性来代替：

mgt-person[data-cssclass='my-avatar-size']{
  --avatar-size:42px;
}

<Person data-cssclass='my-avatar-size'></Person>

Hacky，但应该可以。此外，您可能想查看实际生成的 HTML 并使用它。