ホーム>source

カラーテーマのページを作成するために、CMS(prismic.io)のgraphqlを使用して反応サイトのデータをクエリしています。変数または小道具をスタイル付きコンポーネントに渡して、CMSから送り返されたものに基づいて背景色を変更します。

以下の例では、私のgraphqlクエリは、ユーザーが入力したHEXを返します。これは、ボタンなどに適用され、そのページのテーマになります。

ユーザーがCMS内で色を選択すると、色はページごとに変わります。

任意の助けいただければ幸いです。以下のコード例:

小道具

ウィズウィズ

成分<前>ウィズウィズ props.data.case_study_color
あなたの答え
  • 解決した方法 # 1

    次のことができます。

    <前>ウィズウィズ

    こちらのコードサンドボックスの例をご覧ください。

    これがコンポーネントコードです:

    <前>ウィズウィズ

  • 解決した方法 # 2

    <前>ウィズウィズ const ContactButton = styled.button` background: #004655; color: ${props => props.color || '#fff'}; font-size: 2rem; padding: 10px; `;

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ GROUP BYでSQLサーバーレコードをループしてグループの値を更新する