問題タブ [grommet]

私は、親と子を結ぶこれらのファンシーな赤い線でカスタム アコーディオンを設計しようとしています (写真を参照)。

ここでは Grommet コンポーネントを使用していますが、要約すると、レイアウトは単なる div の集まり (Box タグ) と、子用の折りたたみ可能なパネル コンポーネント (Collapsible タグ) です。子パネルを開いて、より多くのコンテンツを表示できます。

数回試行した後、親と子を接続するために私が行ったことは、外側のボックスを左の境界線で包み、その上にある白いボックスを使用して下部の余分な境界線を削除することです (2 番目の例の Stack タグコード）。カードと左枠を結ぶ水平線は、Child タブの横 ( SubMenuElement コンポーネント内) に配置されたスタイル付きの div です。

これは非常に複雑な解決策だと思います (また、ホワイト ボックスをレスポンシブにする必要があるため) が、より単純な解決策は考えられませんでした。赤い接続を改善またはやり直す方法について何か提案はありますか? 助けてくれてありがとう！ すべてのパネルがクリック時に同じ変数を使用していることを認識していることに注意してください

);

基本フォントの色を変更するには、テーマにどの変数を設定する必要がありますか? 何かのようなもの：

また

Reactでアプリケーションを作成し、Grommetライブラリを使用してコンポーネントを設計しました。さまざまなモバイル デバイスにブレークポイントを設定するテーマ ファイルを定義しました。

ボタンをレイアウトするには、グロメットボックスコンポーネントを使用しました。

アプリケーションを実行し、さまざまなデバイスで現在のウィンドウを調べると、次の出力が得られます。

と

ResponsiveContext.Consumerを使用して width=size} を設定しても機能しませんでした。

助言がありますか？

サンドボックスの例を作成しました。