タイプセーフスタイルのコンポーネントは、反応のテーマ.jsと次.js💅

14332 ワード
nextjs typescript react styledcomponents テキストリンク
私たちはすべて知っているとスタイルのコンポーネントとタイプスクリプトを愛していますが、ライブラリが入力されていないときは、それを使用することは困難であり、非常に多彩なようです.あなたは、@types/styled-componentsから型を追加する必要がありますが、それはカスタムテーマで非常にうまく動作しないようです.このポストはあなたに役立つでしょう.
カスタムテーマを使用してスタイル付きコンポーネントを使用しようとすると、次のようなエラーが発生したはずです.Styled-Components-Typescript: Property 'backgroundColor' does not exist on type 'DefaultTheme'、あなたがtypescriptと明らかにthey don't maintain the typesでカスタムテーマを使用しているならば、それは非常に一般的な誤りです.
この問題には少なくとも2つの解決方法があります.
  • 公式の方法、非常にマニュアル
    • です
  • 簡単な方法、すべてが自動的に働く

    • 公式のやり方
    あなたがstyled-components documentationに行くならば、あなたはあなたのテーマへの変化の多くを作る必要があるまで、そこのTypescriptについての超小さなセクションがわかります.
    テーマの型を安全にするための公式文書での方法は以下の通りです.
  • 宣言ファイルを作成する
  • インポートされたコンポーネント
    • からDefaultPhemeをインポートします
  • カスタムテーマ
    • でそれを拡張
    このような
    // import original module declarations
import "styled-components";

// and extend them!
declare module "styled-components" {
  export interface DefaultTheme {
    borderRadius: string;

    colors: {
      main: string;
      secondary: string;
    };
  }
}

// source: https://styled-components.com/docs/api#create-a-declarations-file
    次に、作成したカスタムテーマと参照を作成します.
    // myTheme.ts
import { DefaultTheme } from "styled-components";

const myTheme: DefaultTheme = {
  borderRadius: "5px",

  colors: {
    main: "cyan",
    secondary: "magenta",
  },
};

export { myTheme };

// source: https://styled-components.com/docs/api#create-a-theme
    それはうまく動作します、問題はあなたがあなたのテーマから何かを追加/削除する必要があるたびに、また、宣言ファイルを更新する必要があります.

    簡単な方法
    私のやり方は、カスタムテーマファイルを作成し、自動的にインターフェイスを作成することです.この方法では、テーマに何かを追加するたびに宣言ファイルを更新する必要はありません.
    手順は次のとおりです.
  • カスタムテーマファイルを作成する
  • 宣言ファイルを作成する

    あなたのテーマを作成
    // myTheme.ts
export const myTheme = {
  borderRadius: "5px",

  colors: {
    main: "cyan",
    secondary: "magenta",
  },
};

    宣言ファイルを作成する
    楽しい部分は、ここにあります.宣言ファイルを作成するときは、以前のようなスタイルのコンポーネントからDefaultPhemeをインポートする必要がありますが、新しいインターフェイスを作成する代わりに、テーマの型(styled.d.ts)をDefaultThemeで拡張します.
    // styled.d.ts
import "styled-components";
import { myTheme } from "./theme";

declare module "styled-components" {
  type MyTheme = typeof myTheme;

  interface DefaultTheme extends MyTheme {}
}
    私は、それがそれをする最もエレガントな方法でないということを知っています、しかし、それは動きます.

    テーマの使用
    私は、この投稿の目的ではなく、どのようにテーマを作成し、使用するかを説明することはできません.
    あなたはおそらく反応を使用している.JSは、次のstyled.d.tsまたはmyThemeを持っています.jsそのファイルでは、ちょうどApp.tsxを作成し、それにあなたのテーマを渡す必要があります.このような
    // With React.js
import { ThemeProvider } from "styled-components";
import { myTheme } from "./theme";

function App() {
  return (
    <ThemeProvider theme={myTheme}>
      <h1>Hello World!</h1>
    </ThemeProvider>
  );
}

export default App;
    そして次へ.JSの人々、あなたはちょうど彼らがあなたを与えるデフォルト_app.jsxファイルを少し変更する必要があります.
    // With Next.js
import { ThemeProvider } from "styled-components";
import type { AppProps } from "next/app";
import { myTheme } from "./theme";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={myTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
    それを行うと、簡単にお客様のコンポーネントのテーマにアクセスできます.
    // Box.tsx
import styled from "styled-components";

const BoxContainer = styled.div`
  display: flex;
  border-radius: ${(props) => props.theme.borderRadius};
  color: ${(props) => props.theme.colors.main};
  background-color: ${(props) => props.theme.colors.secondary};
`;

const Box = () => <BoxContainer>Hello World!</BoxContainer>;
    またはオブジェクトの破壊によるより直接的なアプローチ
    // Box.tsx
import styled from "styled-components";

const BoxContainer = styled.div`
  display: flex;
  border-radius: ${({ theme }) => theme.borderRadius};
  color: ${({ theme }) => theme.colors.main};
  background-color: ${({ theme }) => theme.colors.secondary};
`;

const Box = () => <BoxContainer>Hello World!</BoxContainer>;
    ここでは、宣言ファイルを更新する必要がなく、コンポーネントのテーマの自動補完を見ることができます.

    私は、このポストがあなたのスタイルの構成要素とタイプスクリプト問題にあなたを助けたことを望みます.何か質問があれば、コメントで私に尋ねることを躊躇しないでください.私はいつも喜んで手伝います.
    • Javaインタフェース(コールバック、リスナー、傍観者)
    どのようにフラッタのスナックバーの不透明度を変更するには?