1

グロメットの新人で、問題を抱えています。Grommet v2.14.0 で異なるブレークポイントに異なる edgeSize 値を設定しようとしています。

ここでテーマコードを見つけることができます->

export const v3theme = {
  global: {
    edgeSize: {
      none: "0px",
      small: "23px",
      medium: "24px",
      large: "25px",
      xlarge: "26px"
    },
    breakpoints: {
      xsmall: {
        value: 478,
        edgeSize: {
          none: "0px",
          small: "1px",
          medium: "2px",
          large: "4px",
          xlarge: "5px"
        }
      },
      small: {
        value: 767,
        edgeSize: {
          none: "0px",
          small: "6px",
          medium: "7px",
          large: "8px",
          xlarge: "9px"
        }
      },
      medium: {
        value: 991,
        edgeSize: {
          none: "10px",
          small: "11px",
          medium: "12px",
          large: "13px",
          xlarge: "14px"
        }
      },
      large: {
        value: 1440,
        edgeSize: {
          none: "0px",
          small: "15px",
          medium: "16px",
          large: "17px",
          xlarge: "18px"
        }
      },
      xlarge: {
        edgeSize: {
          none: "0px",
          small: "19px",
          medium: "20px",
          large: "21px",
          xlarge: "22px"
        }
      }
    }
  }
};

そして、pad="large" を含む基本的な Box コンポーネント

<GrommetBox pad={{ horizontal: "large" }}>test</GrommetBox>

ブレークポイントはうまく機能しています。しかし、パディングはそうではありません。

予想される動作 xsmall ブレークポイントでは、padding-left/right を 4px にする必要があります。 small ブレークポイントでは、padding-left/right を 8px にする必要があります。 medium ブレークポイントでは、padding-left/right を 13px にする必要があります。 largebreakpoint では、padding- left/right は 17px である必要があります xlarge ブレークポイントでは、padding-left/right は 21px である必要があります

実際の動作 小さなブレークポイントの edgeSize だけが正しく機能しています。 ここにスクリーンショットがあります

他のブレークポイント サイズでは、コードはデフォルトの global.edgeSize.large 値 (この場合は 25px) を呼び出しています。 ここにスクリーンショットがあります

また、ShimiSun から SandBox の例を見つけて、コードをテストしましたが、問題はまだ残っています。 https://codesandbox.io/s/grommet-ts-textinput-type-forked-bcrle

おそらく、responsiveBreakpoint prop に関連しています。RespondBreakpoint:"xsmall" に変更すると

次に、xsmall の値が機能し始めます。

つまり、すべてのブレークポイントをレスポンシブとして定義したいと考えています。

私が間違っていることを知っていますか、それとも一般的な行動ですか?

前もって感謝します。

4

1 に答える 1

0

私はあなたがスポットだと思います

おそらく、それは小道具に関連してresponsiveBreakpointいます。RespondBreakpoint:"small" に変更すると

グロメットの基本テーマ (「xsmall」など) に存在しない新しいブレークポイントを定義しているresponsiveBreakpointため、グロメットが実際のブレークポイントを認識してレイアウト (border、方向、ギャップ、マージン、パッド、ラウンド)。

それがうまくいくと思われる場合は、それがあなたの答えになるはずです。

とはいえ、アプリケーションにブレークポイントを追加すると、レイアウト処理が複雑になることに注意してください。必要でない場合は避けてください。

于 2021-01-09T20:21:28.503 に答える