时间戳

首页 > 解决方案 > 如何在模块化css React中更改fontawesome图标的颜色

reactjs - 如何在模块化css React中更改fontawesome图标的颜色

问题描述

这是<MessageHeader />组件的文件夹结构。

import React, { Component } from 'react';
import style from '../css/MessageHeader.css';
import { fa, fa_question } from '../icons/icons';

    class MessageHeader extends Component {
        render(){
            return(

                <div className={style.container}>
                    <span className={[fa, fa_question].join(' ')} />
                </div>
            );
        }
    }

    export default MessageHeader;

这是icons.js 文件

import fontAwesome from 'font-awesome/css/font-awesome.css';

const { fa, 'fa-question':fa_question } = fontAwesome;

export {
    fa,
    fa_question
}

现在我想添加这个：

.fa-question {
    color: white
  }

我该怎么做 。请帮助我是反应生态系统的新手。

标签： reactjsfont-awesome

解决方案

我假设您正在使用create-react-app来创建您的项目。您可以在您的项目上创建一个 style.css 文件（例如，在 icon.js 文件旁边），然后将其导入您的项目。

import "./style.css";

您也可以使用评论中提到的 Revansiddh 的内联样式。

<span className={[fa, fa_question].join(' ')} style:{{color: "#FFF"}} />

推荐阅读