css - Material UI - 为 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 };

这没用。你有想法吗 ？

标签： cssreactjsmaterial-ui