材质用户界面-设置SVG的颜色

Question

我在ReactJS中使用Material UI，并具有以下组件来呈现SVG：

import React, { FunctionComponent } from "react";
import SvgIconMUI from "@material-ui/core/SvgIcon";
import { SvgIconProps } from "./types";
import { ReactComponent as HelloWorld } from "Icon/Sections/icon-flat.svg";
const SvgIcon: FunctionComponent<SvgIconProps> = ({
  slug,
  classes,
  svgIconViewBox = "0 0 96 96",
}) => {
  const SpecificSpartenIcon = HelloWorld;

  return (
    SpecificSpartenIcon && (
      <div className={classes.svgContainer}>
        <SvgIconMUI viewBox={svgIconViewBox} className={classes.svgIcon}>
          <SpecificSpartenIcon />
        </SvgIconMUI>
      </div>
    )
  );
};
export default SvgIcon;

我要实现的目标：为SVG设置另一种颜色。

我试图改变颜色的东西：

import { makeStyles, Theme } from "@material-ui/core";

interface Props {
  colors: ExpertColor;
}

const svgIconViewBox = "0 0 96 96";
const selectedIconStyles = { fontSize: 30 };

const useStyles = makeStyles<Theme, Props>((theme: Theme) => ({
  svgContainer: {
    display: "flex",
    justifyContent: "center",

    position: "relative",
    height: "100%",
    width: "100%",
    padding: 0,
    
    fill: "red !important;",
    color: "red !important;",
  },
  svgIcon: {
    position: "absolute",
    height: "55px",
    width: "55px",
    top: 0,
    
    fill: "red !important;",
    color: "red !important;",
  },
}));

export default { useStyles, svgIconViewBox, selectedIconStyles };

它不起作用。你有个主意吗？