Блог

Здравствуйте, дорогие разработчики!

В настоящее время я работаю над адаптивным экраном пользовательского интерфейса / UX в веб-приложении React. Дело в том, что для определенного размера экрана мне нужно иметь правильное заполнение при общем <Grid> уменьшении с 80 пикселей до 16, используя spacing() .

Он работает нормально, но, поскольку он применяется только к 3 маршрутам, 3 страницам, его необходимо обновить вручную, чтобы изменить его первоначальный размер или вернуться к заполнению 16 пикселей.

Вот мой код для этой цели, внутри makeStyle я использую :

     containerWithoutItem: ({ pathname }: any) => ({
        paddingLeft: theme.spacing(10),
        overflow: 'auto',
        '@media screen and (max-width: 1100px)': {
          paddingRight: principleRoutes.includes(pathname) ? theme.spacing(2) : theme.spacing(10)
        }
      }),
  

И вот мой array principleRoutes вариант, up, в том же файле :

 let principleRoutes = ['/home', '/home/board', '/home/products', '/home/history'];
  

Конечно, my Component , внутри которого находится <Grid /> элемент, имеет правильное props объявление: pathname , поэтому он отлично работает, именно на тех маршрутах, которые мне нужны для работы.

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