問題タブ [grommet]

grommet v2 でアプリのテーマを作成しようとしています。グロメットコンポーネントからクレートフォームに Form と FormField を使用しています。FormField がアクティブな場合、下の境界線の色がデフォルトaccent-1に変わり、この境界線の色を変更できません。

コンポーネントのテーマプロパティに入れているtheme.jsファイルがあります。テーマに関連するものはすべてうまく機能します (ボタンの色など)。accent-1 の色を変更しようとしましたが、これに関するドキュメントが不足しています。

theme.jsで

この色をグレーに変更する予定ですが、まだデフォルトの色です

そのため、gatsby サイトに約 1 秒間オーバーレイを表示して、後ろに正しいブレークポイントをロードできるようにしています。どうすればこれを達成できますか？

そこで、Overlay をロードし、一定時間後に消えるように Interval と State を設定しました。しかし、各ページがオーバーレイをリロードした後に問題が再び発生します。redux のような状態管理はありません。外部リンクからの更新または開始のたびにのみオーバーレイを表示する必要がありますが、内部リンクをクリックする必要はありません。

useEffectマウントでのみレンダリングしてみましたが、内部リンクの変更が再マウントをトリガーするため、これはうまくいきません

Browser API onInitialClientRender を使用できることがわかりました。しかし、そこで生成された値に gatsby-browser.js の外部でアクセスする方法がわかりません。一般に、これらの API の使用方法を理解するのに問題があります。

customHooks.js

Layout.js

したがって、期待される結果は、最初のクライアント レンダリングで、オーバーレイをレンダリングするように指示する状態を設定するように指示する方法であり、この 1 つのレンダリングの後、オーバーレイのレンダリングを無効にするように状態を変更する必要があります。