Проблема edgeSize на разных точках останова в Grommet

Я немного новичок в Grommet и имею проблемы. Я пытаюсь установить разные значения edgeSize для разных точек останова в Grommet v2.14.0

Здесь вы можете найти код темы - ›

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"
        }
      }
    }
  }
};

И базовый компонент Box, который включает pad = large

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

Точки останова работают хорошо. Но прокладки нет.

Ожидаемое поведение. В точке останова xsmall значение padding-left / right должно быть 4 пикселя. В небольшой точке останова значение padding-left / right должно быть 8 пикселей. В средней точке останова padding-left / right должно быть 13 пикселей. В большой точке разрыва padding-left / right должно быть 17 пикселей. В точке останова xlarge, padding-left / right должно быть 21 пикселей.

Фактическое поведение только небольшая точка останова edgeSize работает правильно. вот скриншот

Для других размеров точки останова код вызывает значение global.edgeSize.large по умолчанию, которое в данном случае составляет 25 пикселей. вот скриншот

И я также нашел пример SandBox от ShimiSun и протестировал на нем свой код, проблема все еще существует. https://codesandbox.io/s/grommet-ts-textinput-type-forked-bcrle

Вероятно, это связано с опорой responseiveBreakpoint. Когда я меняю его на отзывчивый

Затем значение xsmall начинает работать.

Короче говоря, я хочу определить все точки останова как отзывчивые.

Вы хоть представляете, что я делаю неправильно, или это обычное поведение?

Заранее спасибо.


reactjs grommet
person bariskuran    schedule 08.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю ты на месте

Вероятно, это связано с responsiveBreakpoint prop. Когда я меняю его на отзывчивый

Поскольку вы определяете новые точки останова, которых нет в базовой теме люверса (xsmall и т. Д.), Вам необходимо переопределить responsiveBreakpoint, чтобы втулка знала фактическую точку останова, чтобы инициировать изменения в макете (граница, направление , промежуток, поле, контактная площадка и округление).

Если это работает для вас, то это должен быть ваш ответ.

При этом помните, что добавление дополнительных точек останова в ваше приложение усложнит обработку макета, поэтому, пожалуйста, избегайте этого, если в этом нет необходимости.

person Shimi    schedule 09.01.2021
comment
Спасибо за ответ Шими, responseiveBreakpoint помогает решить пару моих проблем. Но все же я не мог понять, как использовать несколько (более 2) точек останова для edgeSize. Даже если я использую responseiveBreakpoints, значение edgeSize не меняется для других точек останова. Я имею в виду, например, когда respBP равен xsmall, а когда текущий размер xsmall, да, значение edgeSize меняется. Но когда я меняю screenSize со среднего на большой, edgeSize не меняется, и он по-прежнему использует значения global.edgeSize, даже если я уже определил отдельные значения edgeSize для средних и больших размеров. - person bariskuran; 10.01.2021