スタイルコンポーネントを次へ追加する方法.JSプロジェクト
11552 ワード
あなたの次のスタイルのコンポーネントを使用します.JSプロジェクト?また、タイプスクリプトを使用して?
以下に必要な手順を示します.スタイル付きコンポーネントライブラリを型 で追加する特別なBabelプラグインを 追加は、 を作成します作成ファイルを作成します.
スタイル付きコンポーネントライブラリをタイプ
ラン
特別なバベルプラグインを加えてください
ファイルを作成する
でファイルを作成
宣言ファイルを作成します.
プロジェクトルートで、スクリプトの宣言ファイルを作成します.それを
ライブラリを使う
以下に必要な手順を示します.
_document.tsx
ファイルスタイル付きコンポーネントライブラリをタイプ
ラン
yarn add styled-components
yarn add @types/styled-components
特別なバベルプラグインを加えてください
yarn add --dev babel-plugin-styled-components
以下のファイルを作成します.{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
ファイルを作成する
でファイルを作成
import Document 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>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
_app.tsx
を作成し、ペーストします.import { createGlobalStyle, ThemeProvider } from "styled-components";
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
* {
font-family: 'Open Sans', sans-serif;
}
`;
const theme = {
colors: {
primary: "#0070f3",
},
};
export default function App({ Component, pageProps }) {
return (
<>
<GlobalStyle />
<ThemeProvider theme={theme}>
<Component {...pageProps} />
</ThemeProvider>
</>
);
}
宣言ファイルを作成します.
プロジェクトルートで、スクリプトの宣言ファイルを作成します.それを
styled.d.ts
と名付けましょうimport "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
colors: {
primary: string;
};
}
}
だから、私たちのテーマの形を記述したい場合は、ここでそれを行うことができます.ライブラリを使う
.babelrc
に_document.tsx
を改名し、すべてを削除し、以下をペーストします.import React from "react";
import styled from "styled-components";
const Title = styled.h1`
font-size: 50px;
color: ${({ theme }) => theme.colors.primary};
`;
const Home: React.FC = () => {
return <Title />;
};
export default Home;
それだ!次のスタイルコンポーネントを使用できます.タイプスクリプトによるjs.Reference
この問題について(スタイルコンポーネントを次へ追加する方法.JSプロジェクト), 我々は、より多くの情報をここで見つけました https://dev.to/adambaialiev/how-to-add-styled-components-to-next-js-project-using-typescript-2nl4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol