悬停时的 Fluent-Ui-React 图标轮廓

Question

我是 fluent-UI 的初学者，使用 react (@fluentui/react-northstar 0.47.0)

我尝试了不同的解决方案，但无法解决这个结果。请在这里指导我。

目前，当我将鼠标悬停在图标上时，它变成了填充状态，但我想保持它们的轮廓，无论是否悬停鼠标。

这是我的观察，Fluent-UI 在运行时渲染图标

<span> 
 <svg role-"img" data-aa-class="Icon">
 <g>
   <path class="ui-icon__filled" d="M16.707 ..."></path>

   <path class="ui-icon__outline" d="M16.707 ..."></path>
 </g>
 </svg>

</span>

这个在运行时渲染，我试图通过 CSS 来实现，但不能。任何知道这件事的人

Answer 1

您可以通过添加 iconProps 或样式来解决此问题

// can also import from office-ui-fabric-react in Fabric-based apps
import { mergeStyles } from '@uifabric/merge-styles';

const blueBackgroundClassName = mergeStyles({
  backgroundColor: 'green'
});
const className = mergeStyles(blueBackgroundClassName, {
  padding: 50, // px is assumed if no units are given
  selectors: {
    ':hover': {
      backgroundColor: 'red'
    }
  }
});

const myDiv = <div className={className}>I am a green div that turns red on hover!</div>;