个人中心
gpt4 book ai didi

reactjs - 在 nextJS 中添加规范标签会使 FontAwesomeIcon 类不起作用

转载 作者：行者123 更新时间：2023-12-05 04:52:40 29 4
gpt4 key购买 nike

我在添加 nextjs 时遇到了一个奇怪的错误

  <Head>
    <link rel="canonical" href="url"></link>
  </Head>

在我的 index.tsx 中，该页面中的一个元素无法正确呈现。我用

<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />

其中添加了那些标准类 svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red。

奇怪的是，当没有添加规范标签时，这些类可以正常工作 enter image description here

添加标签后，宽度和 svg-inline--fa 没有被渲染(尝试刷新，重启服务器，prod en dev 环境)

enter image description here

这些是我的依赖

"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"

有没有人遇到过这个问题或对如何解决它有任何想法？

提前谢谢

最佳答案

对于 OP 来说可能为时已晚，但对于 future 的人来说，这似乎应该回答这个问题。

添加到 _app.js

import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

来源: https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285

关于reactjs - 在 nextJS 中添加规范标签会使 FontAwesomeIcon 类不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66401523/

29 4 0
文章推荐： python - 在 Python 中打印到控制台时如何阻止 CLion 在字符串中自动换行
文章推荐： c# - OneTimeSetUp 的空引用类型
文章推荐： javascript - 在 react 表的单元格中将字符串呈现为 html
文章推荐： VS Code 终端中未显示 MongoDB Playground 输出