Javascript 在React with Sass中设置svg的样式

我用React完成了前两个项目，并使用Sass文件设计组件的样式。但在这个项目中，它变得有点混乱，因为我必须使用SVG来处理我的图像。现在我一直在用Sass文件设计SVG的样式

下面是仅包含navbar组件的示例，我想在其中更改

logoBookmark

svg的颜色

我不想粘贴整个xml内容。所以我直接导入SVG

从“../../images/logo bookmark.svg”导入logo书签

并为
img
标记设置
src={logoBookmark}

为了设计外部SVG，我发现了这个简单的堆栈溢出

但是我不知道如何在我有一个Sass文件的地方实现这个，它被进一步导入到JSX文件中

那么，有人可以分享这个问题的最佳解决方案吗？
您需要将SVG作为组件导入，这样它将作为
而不是
装载

然后，您只需使用带有CSS的
svg
来瞄准
圆圈
：

.logo{
圈{
填充物：红色；
}
}
从“../../images/Logo bookmark.svg”导入{ReactComponent as Logo}”；
导出默认函数NavBar（）{
返回(
);
}

请显示一个可复制的示例，请参阅。向我们展示一个带有svg的沙盒（），您尝试设置的样式，您尝试过的内容以及不起作用的内容。在StackOverflow中，我们问的是特定的问题，而不是“最佳解决方案”，因为“最佳解决方案”对于一个问题来说过于宽泛，并且取决于项目。@DennisVash我提供了codesandbox链接。我希望更改JSX文件中我导入的
logoBookmark
的颜色。请注意，这不是一个简单的示例，相反，您应该只显示SVG，而不显示它周围的所有项目。
.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>
  );
}