我有一些问题的图标和风格是在NextJs中使用。我使用材料UI在我的项目中，开发时间一切都是好的，但当我建立项目，图标首先是大，然后它得到正常。我尝试使用其他图标集，但结果是没有变化。这是一个NextJs的错误？之前：
之后：
pgx2nnw81#
您可以使用width属性来设定图标的预设大小，这样当CSS完全载入时，它们就会变更为图标的大小。
width
<Icon width="16" />
rxztt3cl2#
将以下代码添加到app.js/ts文件中，它应该可以修复您问题
import { config } from '@fortawesome/fontawesome-svg-core' // 👈 import '@fortawesome/fontawesome-svg-core/styles.css' // 👈 config.autoAddCss = false // 👈
功劳归零
ep6jt1vc3#
这似乎有助于我使用MUI图标之前：
<WebAssetOffIcon sx={{maxWidth: 60, maxHeight: 60 }} />
<WebAssetOffIcon style={{ maxWidth: 60, maxHeight: 60 }} />
有人提到：“原因是在加载CSS之前呈现图标.”
rks48beu4#
请将此代码添加到“_document.js”_document.js
import Document, {Html, Head, NextScript, Main} from 'next/document' import {ServerStyleSheet} from 'styled-components'; export default class MyDocument extends Document { static getInitialProps({renderPage}) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(<App {...props}/>)); const styleTags = sheet.getStyleElement(); return {...page, styleTags}; } render() { return ( <Html lang="en"> <Head/> <body> <Main /> <NextScript/> </body> </Html> ) } }
天赋风暴（~ S）
4条答案
按热度按时间pgx2nnw81#
您可以使用
width属性来设定图标的预设大小，这样当CSS完全载入时，它们就会变更为图标的大小。rxztt3cl2#
将以下代码添加到app.js/ts文件中，它应该可以修复您问题
功劳归零
ep6jt1vc3#
这似乎有助于我使用MUI图标
之前：
之后：
有人提到：“原因是在加载CSS之前呈现图标.”
rks48beu4#
请将此代码添加到“_document.js”
_document.js
天赋风暴（~ S）