I am a beginner in fluent-UI with react (@fluentui/react-northstar 0.47.0)
I tried different solutions but couldn't solve this result. Kindly guide me here.
Currently, when I hover mouse on the icon it turned filled but I want to keep them outline either I hover the mouse or not.
Here is my observation, Fluent-UI render Icon on run-time like
<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>
This render on run time, I tried to achieve through CSS but couldn't. Anyone who knows about this
you can work on this by adding iconProps or styles
// 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>;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.