💅 次のスタイルコンポーネントの設定JS 9.5.2
18442 ワード
ステップ1 -次を作成します.アプリケーション
私はすべての開発フォルダーをデスクトップにするので、私は
cd Desktop
npx create-next-app
//Running this script on the folder you want to store the project folder
* Will ask you whats your project name? projectName
/*
Enter the project name and it will create a folder with that name along
with all the neccessary files
*/
ステップ2 -スタイルコンポーネントライブラリを追加する
yarn add styled-components
ステップ3 -開発者依存の追加
yarn add -D babel-plugin-styled-components
ステップ4 -作成.Babelrcファイル
SSRと一緒にスタイルのコンポーネントで作業するときに物事を遠近に置くには、ハッシュ(一意の名前)を作成し、デバッグ中に少しトリッキーに得ることができます.このファイルは次の2つのことを行います
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true, "displayName": true}]]
}
これはpropsのクラス名の警告/エラーを防ぐために使用されましたが、このファイルを追加した後でも、このエラーは時々ポップアップ表示されます.
https://styled-components.com/docs/tooling#babel-plugin
この問題はここで追跡できます.
{
"env": {
"development": {
"plugins": [
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
],
"presets": ["next/babel"]
},
"production": {
"plugins": [
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
],
"presets": ["next/babel"]
}
},
"plugins": [
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
]
}
ステップ5 -を作成します.js
あなたのページフォルダの中に“Chord document . js”という名前のファイルを作成します.これは、
A custom Document is commonly used to augment your application's and
tags. This is necessary because Next.js pages skip the definition of the surrounding document's markup.To override the default Document, create the file ./pages/_document.js and extend the Document class as shown below:
この件についてはこちらをご覧ください.
import Document, {Html, Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
render() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
The collectStyles method wraps your element in a provider.
getStyleElement() method that returns an array of React elements.
何かについて知っている
https://github.com/vercel/next.js/issues/16637
それはthats!テストします.
次に、インデックス内に次のコードを追加します.js
インデックス.js
import Head from 'next/head'
import styled from 'styled-components';
// Creating a styled-component
const Test = styled.p`
font-size: 40px;
color: blue;
`;
export default function Home() {
return (
<div>
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
{/*Testing Styled component */}
<Test>Hello</Test>
</main>
</div>
)
};
$ yarn dev
// $ just mean run it inside your bash terminal you just need to copy "yarn dev"
https://styled-components.com/docs/advanced#server-side-rendering
エクストラ:スタイルコンポーネントを使用してグローバルスタイルを使用する方法
import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle`
p {
font-size: 20;
}
`;
function MyApp({ Component, pageProps }) {
return (
<>
<GlobalStyle />
<Component {...pageProps} />
</>
);
}
export default MyApp
重要ポインタ
あなたが次の将来のポストリリースでこれを見ているならば.JS 9.5.2といくつかの理由でこれは動作しませんが、これはすべての変更のための目を維持したい倉庫です
https://localhost.3000
その他のリソース
Reference
この問題について(💅 次のスタイルコンポーネントの設定JS 9.5.2), 我々は、より多くの情報をここで見つけました https://dev.to/dharmi/setting-up-styled-components-with-nextjs-952-3khfテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol