0.0.11 • Published 4 years ago
@mies-co/next-styled-components v0.0.11
Next-Styled-Components
Easily use styled-components with nextjs.
Example
Installation
# regular NPM package install
npm install --save @mies-co/next-styled-components
# install directly from GitHub
npm install --save github:@mies-co/next-styled-components
# install NPM package via Yarn
yarn add @mies-co/next-styled-componentsOR USING THE GITHUB REGISTRY
You may also create a .npmrc file at the root of your Next.js app, with the following content:
# Specifies the registraty for @mies-co packages
@mies-co:registry=https://npm.pkg.github.com/Then add this in package.json:
{
"dependencies": {
"@mies-co/next-styled-components": "latest"
}
}Usage in your Next.js app
StyledDocument
Enables the default next-styled-components Document.
In pages/_document.js:
// Export StyledDocument directly, or uncomment what's below
export { StyledDocument as default } from "@mies-co/next-styled-components";withStyledDocument
Enables to customize the next-styled-components Document.
import Document, { Html, Head, Main, NextScript } from "next/document";
import { withStyledDocument } from "@mies-co/next-styled-components";
class MyDocument extends Document {
// Uncomment if you need to merge your own getInitialProps with the one from next-styled-components
//
// static async getInitialProps(ctx) {
// const initialProps = await Document.getInitialProps(ctx);
// return { ...initialProps };
// }
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default withStyledDocument(MyDocument);