将类名放在 React-Icon 上

Question

我一直在尝试将一个类直接放置在图标上，以便我可以操纵它的阴影。然而，

{card.c_icon && <card.c_icon ClassName="fa"/>}

或

{createElement(icon, {className: "fa"})}

都不起作用。 这两个示例都是在

list.map()

内拍摄的，其中

IconType

来自

react-icons

。

{card.c_icon && <card.c_icon ClassName="fa"/>}
Error: Type '{ className: string; }' is not assignable to type 'IntrinsicAttributes & IconBaseProps'.
  Property 'className' does not exist on type 'IntrinsicAttributes & IconBaseProps'.ts(2322)

{createElement(icon, {className: "fa"})} 
Error: No overload matches this call.
  The last overload gave the following error.
    Object literal may only specify known properties, and 'ClassName' does not exist in type 'Attributes & IconBaseProps'.ts(2769)

我希望用 CSS 表来操纵图标的样式。

Answer 1

您可以使用 CSS 模块创建一个作用域 CSS 类，该类仅应用于您想要设置样式的特定图标。这是一个例子：

创建 CSS 模块文件，例如

Icon.module.css

:

.fa {
  /* Your custom styles here */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

在 React 组件中导入 CSS 模块：

import styles from './Icon.module.css';

// Inside your list.map()
{card.c_icon && <card.c_icon className={styles.fa}/>}