如何在Fluid UI中将样式应用于IIconProps类型的图标

Question

我有一个按钮，就像下面的示例一样，带有一个图标(addFriendIcon(。

https://developer.microsoft.com/en-us/fluentui#/controls/web/button

如何向该图标添加样式？例如改变颜色？

---

从"React"导入*作为React；从"office ui fabric react"导入｛ActionButton，IIconProps｝；

const addFriendIcon:IIconProps=｛iconName:"AddFriend"｝；

export const ButtonActionExample:React.FunctionComponent=props=>｛

返回(创建帐户)；}；

Answer 1

如果你想用Fluent UI的方式，只需将相应的样式添加到IIconProps:

const addFriendIcon: IIconProps = {
iconName: 'AddFriend',
styles: {
root: { color: 'red' }
}
};

这是调整后的代码笔：https://codepen.io/alex3683/pen/RwarOrb