如何将样式应用于 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 => {

return ( 创建账户 ); };

Answer 1

如果您想以 Fluent UI 的方式进行操作，只需将相应的样式添加到 IIconProps：

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

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