使用Sass在React中设置SVG样式
边梁
我已经用React完成了之前的2个项目，并使用了Sass文件来设计组件的样式。但是在这个项目中，由于我必须为图像使用SVG，因此有些混乱。现在，我被困在使用Sass文件样式化SVG的过程中。
这是codeandbox，仅包含要更改svg颜色的导航栏组件logoBookmark。
我不想粘贴整个xml内容。所以我立即导入SVG
import logoBookmark from "../../images/logo-bookmark.svg"，
并设置src={logoBookmark}了img标记。
为了给外部SVG设置样式，我在堆栈溢出时找到了这个简单的解决方案。
但是我不知道如何在React中实现此功能，我有一个Sass文件，该文件进一步导入了JSX文件中。
那么有人可以分享这个问题的最佳解决方案吗？
丹尼斯瓦什
您需要将SVG导入为组件，以便将其作为<svg/>而不是进行安装<img/>。请参阅在CRA中添加SVG。
然后，您只需circle将svgwith CSS作为目标：
.logo {
circle {
fill: red;
}
}
import { ReactComponent as Logo } from "../../images/logo-bookmark.svg";
export default function NavBar() {
return (
<nav className="navbar">
<div className="brand">
<a href="/">
<Logo className="logo" />
</a>
</div>
</nav>
);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何使用类在超链接中设置 svg 样式？
- 2
如何使用SASS进行样式设置
- 3
使用React中的条件在单独的组件中设置元素的样式
- 4
无法使用道具在 React Native 中设置样式
- 5
使用CSS设置SVG图像样式
- 6
在React中样式化SVG路径
- 7
如何在CSS / SASS中设置嵌套ID元素的样式
- 8
如何在CSS / SASS中设置嵌套ID元素的样式
- 9
在父 SASS 上设置样式
- 10
使用React设置对象属性的样式
- 11
无法在React中正确使用SASS / SCSS样式
- 12
React：使用内联样式设置所有元素的样式
- 13
使用 React 样式组件对类组件进行样式设置
- 14
如何在Javascript中设置SVG CSS属性的样式？
- 15
如何在javaFX FXML中使用CSS设置SVG的样式
- 16
使用CSS设置SVG样式时遇到问题？
- 17
如何使用样式化组件为React Native中的最后一个子元素设置样式
- 18
如何使用react在相同的函数中设置两次样式？
- 19
使用 URL 设置背景样式以在 react 中定位图像时找不到图像
- 20
使用CSS在JavaFX中设置样式按钮
- 21
从QComboBox中的样式列表中使用QStyleFactory设置样式
- 22
使用CSS样式SVG
- 23
使用CSS样式SVG
- 24
如何使用设置器在XAML中设置默认样式？
- 25
在Vue CLI中，如何使用sass代替node-sass（sass-loader的默认设置）？
- 26
Foundation中的SASS设置
- 27
如何在React Native中设置TextInput的样式以输入密码
- 28
设置在react中传递到变量的元素的样式
- 29
在React中设置样式化的组件，找到相应的组件
我来说两句