悬停上的Fluent-Ui-React图标轮廓
悬停上的Fluent-Ui-React图标轮廓
提问于 2020-07-08 20:48:48
我是使用react的fluent-UI的初学者(@fluentui/react-northstar 0.47.0)
我尝试了不同的解决方案，但无法解决这个结果。请带我到这里。
目前，当我将鼠标悬停在图标上时，它会变得充满，但我想让它们保持轮廓，无论我是否将鼠标悬停。
这是我观察到的，Fluent-UI render Icon on run-time，比如
<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实现，但不能。
回答 1
Stack Overflow用户
发布于 2021-01-29 16:24:13
您可以通过添加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>;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62795199
复制相关文章
相似问题
腾讯云开发者
