スタイルコンポーネントを次へ追加する方法.JSプロジェクト


あなたの次のスタイルのコンポーネントを使用します.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.