我正在使用 react-icons 和 Font Awesome 图标,我设法通过两种方法轻松更改颜色:
与颜色 Prop 一起使用:
<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;
}
最佳答案
完整代码:https://codesandbox.io/s/pensive-rgb-r8g1t?file=/src/App.js
对于颜色传递,像这样的 Prop (我称之为蓝色)。
<Apple color="blue" size="xlarge" />
所以在另一端设计你的图标像这样。const customColorTheme = deepMerge(base, {
icon: {
extend: css`
${(props) =>
props.color === "blue" &&
`
fill: #023373;
`}
`
}
});
关于reactjs - react-icons - 无法更改 Grommet 图标的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64364110/