Прекрасный способ настроить m и p для «Box» в Material-UI v4

Question

Для компонента Box в material-ui v4 поля и отступы могут быть установлены с помощью массива или объекта, используя разные значения для разных точек останова для адаптивного проектирования. Есть ли удобный способ использовать что-то вроде smUp или mpDown установки значений, например, все размеры окон больше md?

Мне действительно нравятся новые функции для адаптивного дизайна в новой библиотеке материалов-пользовательского интерфейса, но документация, кажется, требует немного больше улучшений :)

Я могу сделать это без каких-либо проблем, установив массив со всеми пятью элементами, например <Box m={[1, 1, 2, 2, 3]}>, но я считаю, что было бы намного лучше, если бы существовал такой способ: <Box m={{smDown:1, mdUp:2, xl:3}}>.

Извините, я не уверен, является ли этот вопрос глупым и не квалифицированным как проблема в материале-репозитории github. Было бы замечательно, если бы кто-нибудь из вас мог дать мне несколько советов или советов, чтобы разместить их на своем официальном github: P Спасибо!

Answer 1

Все точки останова ведут себя как "вверх", за исключением "xs", который действует по умолчанию (то есть подход с мобильным первым стилем).

В примере из документации показано, что CSS, созданный для <Box p={{ xs: 2, sm: 3, md: 4 }} />, выглядит следующим образом:

padding: 16px; /* xs */
@media (min-width: 600px) { /* sm */
  padding: 24px;
}
@media (min-width: 960px) { /* md */
  padding: 32px;
}