Use different profile image sizes in Microsoft Graph Toolkit

Question

In my MGT React SharePoint WebPart, I would like to have some of the profile images displayed with large size (48px), while other images displayed with medium size (36px).

I know the property avatarSize can be used, but this only supports Small, Large or Auto. And in the mgt-person css class, I can specify --avatar-size: 36px. But since this css class affects all person components on the page, all profile images are now sized 36px. And there is no support for specifying a css class on the person component itself.

Do you know if this can be achieved another way?

UPDATE: I managed to solve this myself with the help from this article: https://developer.microsoft.com/en-us/graph/blogs/a-lap-around-microsoft-graph-toolkit-day-4-customizing-components/

Using the following definitions in my scss file, it can adjust the avatar size based on for example a WebPart property:

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

And in my tsx file, it looks like this:

  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;
      }
    }
  }

Hope this helps someone else struggling with this.

Answer 1

There is a styling guide: MGT Styling guide

You can simply create a CSS rule and call the desired component. Example from the styling guide

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

Thus you should be able to combine this with a CSS class such as:

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

Since all React components expose a className attribute this should work:

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

UPDATE

Since, for some reason, there is no className attribute available, why don't you use a data- attribute instead:

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

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

Hacky, but should work. Also, you might want to look at the actual generated HTML and use this.