Veja os exemplos aqui Link para o NPM! Mujapira UI
Em caso de dúvida, consulte o projeto Agenda Fácil
npm i @mujapira-ui/reactglobal.ts
import { globalCss } from '@mujapira-ui/react'
export const globalStyles = globalCss({
'*': {
boxSizing: 'border-box',
padding: 0,
margin: 0,
},
body: {
backgroundColor: '$gray900',
color: '$gray100',
'-webkit-font-smoothing': 'antialiased',
},
})_document.page.tsx
import { getCssText } from '@mujapira-ui/react'
import { Head, Html, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<style
id="stitches"
dangerouslySetInnerHTML={{ __html: getCssText() }}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)_app.page.tsx
import type { AppProps } from 'next/app'
import { globalStyles } from '../styles/global'
globalStyles()
export default function App({
Component,
pageProps: {},
}: AppProps) {
return (
<Component {...pageProps} />
)
}