NextJS巨大的图标在初始页面加载后,建立项目

jslywgbw  于 2022-11-23  发布在  其他
关注(0)|答案(4)|浏览(133)

我有一些问题的图标和风格是在NextJs中使用。我使用材料UI在我的项目中,开发时间一切都是好的,但当我建立项目,图标首先是大,然后它得到正常。我尝试使用其他图标集,但结果是没有变化。这是一个NextJs的错误?
之前:

之后:

pgx2nnw8

pgx2nnw81#

您可以使用width属性来设定图标的预设大小,这样当CSS完全载入时,它们就会变更为图标的大小。

<Icon width="16" />
rxztt3cl

rxztt3cl2#

将以下代码添加到app.js/ts文件中,它应该可以修复您问题

import { config } from '@fortawesome/fontawesome-svg-core' // 👈
import '@fortawesome/fontawesome-svg-core/styles.css' // 👈
config.autoAddCss = false // 👈

功劳归零

ep6jt1vc

ep6jt1vc3#

这似乎有助于我使用MUI图标
之前:

<WebAssetOffIcon sx={{maxWidth: 60, maxHeight: 60 }} />

之后:

<WebAssetOffIcon style={{ maxWidth: 60, maxHeight: 60 }} />

有人提到:“原因是在加载CSS之前呈现图标.”

rks48beu

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)

相关问题