Why does Geist take precedence over globals.css in next.js

[Ashinch]

import { CssBaseline, GeistProvider } from '@geist-ui/react'
import Footer from '../component/Footer'
import '../styles/globals.css'
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return (
    <GeistProvider>
      <CssBaseline />
      <Component {...pageProps} />
      <Footer />
    </GeistProvider>
  )
}

export default MyApp

Why does Geist have a higher style priority than globals.css in the production environment of next.js, which leads to the deviation of many of my styles. please tell me what to do?

请问在next.js的生产环境中为什么Geist的样式优先级要高于globals.css，这导致了我的很多样式出现了偏差，请问我该如何做？

[unix]

这是因为 CssBaseline 生成的样式会作为 style 标签追加于 head 中，如果你的 Global Style 是输出为外部引入，优先级上会低于 style 标签类型。

解决方案

• 最简单的方式，使用 JSS 解决方案，如 styled-jsx (总是优先使用标签引入):

<style global jsx>{` global css `}</style>

• 直接使用外部 .css，但在 webpack 等 bundle 工具时，指定全局样式不要提取。
• 直接在 React 中使用 style 标签，如在 NextJS 的 _app.tsx 内，这样总是会被加载为内部样式。
• (不推荐的) 使用更高的权重覆盖，如 #__next p { font-size: 10px; }

[Ashinch]

非常感谢
thanks

[unix]

To ensure that the answers can be searched and referenced by others in the community, here are the answers in English.

The reason for this issue is that the styles generated by CssBaseline are appended to the head as style tags (<style> ... </style>), if your Global Styles generates link tags after bundle, then your Global Styles priority will be lower than the CssBaseline.

Solutions (choose one of them)

• The simplest way is to use a JSS solution such as styled-jsx (always preferentially introduced using tags):

<style global jsx>{` global css `}</style>

• Specify that your Global Style files are NOT extracted when using bundle tools like webpack. (ensure that Global styles are inline)
• Use the style tag directly in React, such as within _app.tsx of NextJS, so that it will always be loaded as an internal style.
• (Non-recommended) Use a higher weight override, such as #__next p { font-size: 10px; }

[Ashinch]

Thank you very much!