在 React 中的 CSS 模块中组合 CSS 类答案

【问题标题】：Combining CSS Classes in CSS Modules in React在 React 中的 CSS 模块中组合 CSS 类
【发布时间】：2019-05-18 14:31:56
【问题描述】：

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

谢谢。

【问题讨论】：

你检查过这个吗？ fontawesome.com/how-to-use/on-the-web/using-with/react
请检查一下，让您知道它是否有效。十指相扣！
如果你想使用多个类名，你可以使用类似的方法来实现它：
谢谢它的工作，但我如何自定义我想改变它的颜色等等？
fa 的 react 组件工作！如何自定义它

标签： css reactjs react-css-modules

【解决方案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。

【讨论】：