react-icons-无法更改颜色索环图标

问题描述

我正在使用react-icons和Font Awesome图标，我设法通过两种方法轻松更改了颜色：

与彩色道具配合使用：

<FaUserTimes /* color="#023373" */ className="icone icone-40" />

使用CSS：

.icone {
  color: #023373; 
}

现在，使用“扣眼”图标似乎无济于事，图标始终为黑色

<GrFormAdd color="#023373" className="icones" />

.icones {
    font-size: 30px; **Font size works!?**
    color: #023373;
}

解决方法

完整代码：https://codesandbox.io/s/pensive-rgb-r8g1t?file=/src/App.js

对于颜色，传递一个像这样的道具（我称之为蓝色）。

<Apple color="blue" size="xlarge" />

因此在另一端设置您的图标的样式。

const customColorTheme = deepMerge(base,{
    icon: {
      extend: css`
        ${(props) =>
          props.color === "blue" &&
          `
        fill: #023373;
      `}
      `
    }
  });