我正在使用 mdbreact npm 与 next.js 反应数据表我想在标题中添加 fa fa 图标，但我无法做到答案

【问题标题】：I am using mdbreact npm for react data tables with next.js what i want to add fa fa icon with the heading but i am unable to do it我正在使用 mdbreact npm 与 next.js 反应数据表我想在标题中添加 fa fa 图标，但我无法做到
【发布时间】：2022-03-24 21:11:51
【问题描述】：

我正在将 mdbreact npm 用于带有 next.js 的数据表，我想添加带有标题的 fa fa 排序图标，但它不起作用下面是我的代码，我已经用 CSS 尝试过：-

// This is how i import mdbreact after installation :- 
import { MDBDataTable, MDBBtn, MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';

// These Are The Heading Of The Table :-
const columns = 
[
{ label: 'Customer Tag' + <i class="fa fa-sort" aria-hidden="true"></i>, field: 'Customer_Tag', sort: 'asc', width: 150 },
{ label: 'Discount Type', field: 'Discount_Type', sort: 'asc', width: 270 },
{ label: 'Discount Condition', field: 'Discount_Condition', sort: 'asc', width: 200 },
{ label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 },
{ label: 'Action', field: 'action', sort: 'disabled', width: 100 },
];

// 这是我的 MDBract 表返回（ )

【问题讨论】：

标签： reactjs mdbreact

【解决方案1】：

label 的值应该是一个字符串，所以我怀疑这就是它不起作用的原因。文档在这里：https://mdbootstrap.com/docs/react/tables/datatables/

您将无法使用令人敬畏的字体类名称，因为您不能在标签中放置元素。

我没有好的解决方案，但这里有两个选择：

我将 react-table 用于我的数据表，并且能够执行您正在尝试的操作。考虑切换到 react-table。

在这种情况下不要使用 font awesome，尝试查找具有相同含义的 html 实体，例如以下列表中的内容：https://dev.w3.org/html5/html-author/charref

【讨论】：

不为我工作，先生
您能告诉我原件是如何“不工作”的吗？您是否收到构建错误，控制台错误，只是没有显示？任何错误消息都会有所帮助。
使用此代码时出现以下错误：- ./pages/component/dataTables.js SyntaxError: C:\Users\lenovo\Desktop\wholesaleapp\pages\component\dataTables.js: Unexpected令牌 (73:34) 72 |常量列 = [ > 73 | { 标签：{'客户标签' + }，字段：'Customer_Tag'，排序：'asc'，宽度：150 }，| ^
感谢您的反馈。是的，根据文档，标签必须是字符串。您的错误消息告诉我它是强制执行的。不允许使用任何元素。我会用另一个建议更新答案。
你的帮助对我有好处。我也试过这个：- const columns = [ { label: Customer Tag , field: 'Customer_Tag' , sort: 'asc', width: 150 }, { label: '折扣类型', field: 'Discount_Type', sort: 'asc', width: 270 }, { label: '折扣条件', field: 'Discount_Condition' , sort: 'asc', width: 200 }, { label: 'Enable/Disable', field: 'status', sort: 'disabled', width: 100 }, { label: 'Action', field: 'action' , 排序: '禁用', 宽度: 100 }, ];

【解决方案2】：

我用实体解决了，这是我的代码：-

常量列 = [ {标签：客户标签⇵，字段：'Customer_Tag'，排序：'asc'，宽度：270，属性：{className：“fas fa-sort”}}， { 标签：折扣类型⇵，字段：'Discount_Type'，排序：'asc'，宽度：270 }， { 标签：折扣条件⇵，字段：'Discount_Condition'，排序：'asc'，宽度：200 }， { 标签：'启用/禁用'，字段：'状态'，排序：'禁用'，宽度：100 }， { 标签：'Action'，字段：'action'，排序：'disabled'，宽度：100 }，

];

【讨论】：

【解决方案3】：

请附上以下链接

import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

【讨论】：