react-图标-无法更改颜色Grommet图标

Question

我正在使用react-icons和Font Awesome图标，我用两种方法很容易地改变了颜色：

与颜色道具配合使用：

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

与css配合使用：

.icone {
  color: #023373; 
}

现在，使用Grommet图标似乎什么都不起作用，图标总是黑色的

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

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

​

​

Answer 1

完整代码：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;
      `}
      `
    }
  });