在 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。

在 React 的 CSS 模块中组合 CSS 类

Combining CSS Classes in CSS Modules in React

css

reactjs

react-css-modules