reactjs - 在 Microsoft Graph Toolkit 中使用不同的配置文件图像大小
问题描述
在我的 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 -成分/
在我的 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;
}
}
}
希望这可以帮助其他人在这方面苦苦挣扎。
解决方案
有一个造型指南:MGT 造型指南
您可以简单地创建一个 CSS 规则并调用所需的组件。样式指南中的示例
mgt-person {
--avatar-size: 34px;
}
因此,您应该能够将其与 CSS 类结合起来,例如:
mgt-person.my-avatar-size {
--avatar-size:42px;
}
由于所有React 组件都公开了一个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>
哈克,但应该工作。此外,您可能想查看实际生成的 HTML 并使用它。