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

Posted 2023-02-19

【中文标题】如何在 Fluid UI 中将样式应用于 IIconProps 类型的图标？

【英文标题】：How do you apply a style to icon of type IIconProps in Fluid UI?

【发布时间】：2020-12-01 15:26:13

【问题描述】：

我有一个按钮，如下例所示，带有一个图标 (addFriendIcon)。

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

如何为这个图标添加样式？比如改变颜色？

---

import * as React from 'react'; 从“office-ui-fabric-react”导入 ActionButton, IIconProps ；

const addFriendIcon: IIconProps = iconName: 'AddFriend' ;

export const ButtonActionExample: React.FunctionComponent = props =>

返回 ( 创建帐号 ); ;

【问题讨论】：

您有可以提供的工作示例吗？如果是 react 组件，可以使用className吗？

这是来自官方 MS 流体网站 codepen.io/evileddie/pen/… 的代码笔

【参考方案1】：

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

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

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