Контур иконки Fluent-Ui-React при наведении курсора

Я новичок в 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, но не смог. Всем, кто об этом знает


reactjs javascript icons react-icons fluent-ui
person Magi    schedule 08.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вы можете поработать над этим, добавив 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>;
person Daniel Noworyta    schedule 29.01.2021