Inject style tag to document head.
npm install style-injectimport styleInject from 'style-inject';
const css = `
body {
margin: 0;
}
`;
styleInject(css, options);If using a library that use style-inject for use css modules in Next.js,
you need to inject styles during SSR, here's an example:
// file: pages/_document.js
import React from 'react';
import { SSR_INJECT_ID } from 'style-inject';
const SSRInjectStyles = () => {
if (!globalThis[SSR_INJECT_ID]) return null
return (
<>
{globalThis[SSR_INJECT_ID].map((module) => (
<style id={module.id} key={module.id}>
{module.css}
</style>
))}
</>
)
}
const Document = (props) => {
const { locale } = props
return (
<Html lang={locale}>
<Head>
{/* Inject styles during ssr */}
<SSRInjectStyles />
{/* ... */}
</Head>
<body>
{/* ... */}
</body>
</Html>
)
}
export default DocumentType: string
Possible values: top
Default: undefined
Insert style tag to specific position of head element.
MIT © EGOIST