有什么办法可以覆盖React中的Material UI Icons npm包提供的颜色？

Question

我是React的新手，正在使用npm包Material UI图标（https://www.npmjs.com/package/@material-ui/icons）并在React组件内显示图标，例如：

输入：

import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';

和渲染：

readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>}

但是，由于KeyboardArrowRightIconnpm软件包提供了SVG，因此它具有自己的填充色：

例如： <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...

我知道我可以通过在元素内具有样式属性来覆盖此颜色，例如：

<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} />

但是，是否有必要将其设置为SCSS变量（style={{ fill: $link-color }}）？

我担心如果样式表中的链接颜色发生更改，那么以后有人将不得不查找所有这些硬编码实例。

Answer 1

只需添加样式 fill: "green"

例子： <Star style={{fill: "green"}}/>

Answer 2

更新：2022 年 7 月 MUI5

有多种方法可以更改图标颜色

  <HomeIcon sx={{color: "#FC0"}} />
  <HomeIcon htmlColor="red" />
  <HomeIcon color="primary" />
  <HomeIcon color="success" />
  <HomeIcon color="action" />
  <HomeIcon color="disabled" />
  <HomeIcon color="error" />
  <HomeIcon sx={{ color: pink[500] }} />

使用sxprop，您可以指定任何十六进制/RGB 颜色代码或主题调色板中的颜色

例子 ：

 import { red } from '@mui/material/colors';

 <HomeIcon sx={{ color: red[800] }} />

这就是我所做的

我使用 MUI v4.5.1。使用具有值继承的colorprop API并添加 div 或 span 包装器并在其中添加颜色。

来自 API 文档

color默认值：inherit。组件的颜色。它支持对该组件有意义的主题颜色。

添加星形图标

import React from 'react';
import Star from '@material-ui/icons/StarRounded';
import './styles.css';

export function FavStar() {
  return (
    <div className="star-container">
      <Star size="2em" fontSize="inherit" />
    </div>
  );
}

在 style.css 中

.star-container {
  color: red;
  font-size: 30px;
}

Answer 3

更改图标颜色

<HomeIcon />
<HomeIcon color="primary" />
<HomeIcon color="secondary" />
<HomeIcon color="action" />
<HomeIcon color="disabled" />
<HomeIcon style={{ color: green[500] }} />
<HomeIcon style={{ color: 'red' }} />

更改图标大小

<HomeIcon fontSize="small" />
<HomeIcon />
<HomeIcon fontSize="large" />
<HomeIcon style={{ fontSize: 40 }} />

使用 Icon 组件的 MDI

<Icon>add_circle</Icon>
<Icon color="primary">add_circle</Icon>
<Icon color="secondary">add_circle</Icon>
<Icon style={{ color: green[500] }}>add_circle</Icon>
<Icon fontSize="small">add_circle</Icon>
<Icon style={{ fontSize: 30 }}>add_circle</Icon>

对于字体

<Icon className="fa fa-plus-circle" />
<Icon className="fa fa-plus-circle" color="primary" />
<Icon className="fa fa-plus-circle" color="secondary" />
<Icon className="fa fa-plus-circle" style={{ color: green[500] }} />
<Icon className="fa fa-plus-circle" fontSize="small" />
<Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} />

了解更多信息的资源，图标

Answer 4

在 Material-UI 中指定/覆盖图标颜色的最简单方法是使用自定义CSS 类名。

假设您想要显示一个绿色复选框而不是一个红色三角形，这取决于某个过程的结果。

您在代码中的某处创建一个函数，例如：

function iconStyles() {
  return {
    successIcon: {
      color: 'green',
    },
    errorIcon: {
      color: 'red',
    },
  }
}

然后将makeStyles应用到该函数，并运行结果。

import { makeStyles } from '@material-ui/core/styles';
...

const classes = makeStyles(iconStyles)();

在渲染函数中，您现在可以使用对象classes：

  const chosenIcon = outcome
    ? <CheckCircleIcon className={classes.successIcon} />
    : <ReportProblemIcon className={classes.errorIcon} />;

我在这个答案中首先提到的功能实际上接受一个主题作为输入，并允许您修改/丰富该主题：这确保您的自定义类不被视为例外，而是作为更全面的可视化解决方案中的集成（例如，主题中的图标颜色最好被视为编码）。

Material-UI 非常丰富，我鼓励您也探索其他现有的自定义机制。

Answer 5

你可以这样做：<PlusOne htmlColor="#ffaaee" />

Answer 6

我发现的最简单的方法是使用以下方法。

import { styled } from '@material-ui/styles';
import { Visibility } from '@material-ui/icons';

const MyVisibility = styled(Visibility)({
    color: 'white',
});

Answer 7

您可以通过使用以下命令创建自定义主题来为所有图标设置默认颜色createMuiTheme()：

createMuiTheme({
  props: {
    MuiSvgIcon: {
      htmlColor: '#aa0011',
    }
  }
})

htmlColor这将为每个图标（如 ）设置 prop 的默认值<KeyboardArrowRightIcon/>。以下是您可以设置的其他道具的列表。

Answer 8

覆盖材质 UI 图标颜色，如下所示

在js中

        const [activeStar, setActiveStar] = useState(false);

        <IconButton onClick={() => setActiveStar(!activeStar)}>
          {activeStar ? (
            <StarOutlined className="starBorderOutlined" />
          ) : (
            <StarBorderOutlined />
          )}
        </IconButton>

在 CSS 中

      .starBorderOutlined {
        color: #f4b400 !important;
       }