Контур иконки 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>;