css - 在 React 的 CSS 模块中组合 CSS 类

Question

我在我的 React 中使用了 Fontawesome 图标，我在 React 中使用了 CSS 模块。现在我想使用这个图标，所以我使用以下语法:<i className={styles['fa-user-circle']} ></i> 我不能使用正常语法 styles.someClassName因为 fontawesome 图标名称中的连字符，我还需要结合 fas 和 fa-user-circle classNames 。我该怎么做？

谢谢。

Answer 1

您可以使用 FontAwesome React 版本 here

它的实现看起来像

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus } from '@fortawesome/free-solid-svg-icons'

你的渲染组件看起来像

 export default (props) => {
  return (
    <div>
      <FontAwesomeIcon icon={faPlus} className="pointer" onClick={props.onAdd} id={props.id} />
    </div>
 )
}

如您所见，我们可以提供 className，因此您可以提供任何您想提供的额外 CSS。