如何在鼠标悬停时更改 Fluent UI 图标颜色？

Question

我在我的项目中使用 Fluent UI。

我用 javascript 中的这个简单代码初始化我的按钮：

iconProps: { 
    iconName: 'NewFolder',
        styles: {
           root: { 
              color: 'orange' 
           }, 
    } 
},

而且我可以将默认颜色覆盖为要求的颜色。

我的问题是，如何设置鼠标悬停在按钮上的颜色？

https://docs.microsoft.com/en-us/javascript/api/react/iiconprops?view=office-ui-fabric-react-latest#@fluentui-react-iiconprops-styles-member

Answer 1

对于 IconButton、DefaultButton 和 PrimaryButton，默认按钮样式有 属性 root，rootHovered，rootChecked 等不同的州。

<IconButton
  iconProps={{ iconName: 'NewFolder' }}
  styles={{
    root: { color: 'blue' },
    rootHovered: { color: 'orange' },
  }}
/>

Codepen 工作示例

Button styles 也可能有帮助。