javascript - 悬停时的 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 来实现,但不能。任何知道这件事的人
解决方案
您可以通过添加 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>;
推荐阅读
- c++ - if(!(x%3)) 是什么意思?
- sql - 将列转置为行
- windows - 如何重启像taskmgr这样的资源管理器?
- java - 在哪里查看/下载 java.util 代码,如 Eclipse 中的 AbstractMap 类
- java - BeanCreationException:创建名称为“flywayInitializer”的 bean 时出错
- typescript - 将 TypeScript 接口的可选属性转换为可为空的属性
- go - 全文搜索限制在 Go Couchbase 中不起作用
- python - 从同一loop_python中的两个路径读取两个文件
- android - 时间戳作为 Firestore,Android 中的文档
- vb.net - 应用程序设置中的 DPIAware 和“启用应用程序框架”