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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com