reactjs - React JS: un stil cu condiție funcționează, dar necesită reîmprospătare pentru a se aplica corect

Salut dragi dezvoltatori!

În prezent lucrez la un ecran UI/UX responsive, într-o aplicație web React. Problema este că, pe o anumită dimensiune a ecranului, trebuie să am paddingul din dreapta pe <Grid> general redus de la 80px la 16, folosind spacing().

Funcționează bine, dar, deoarece se aplică doar pe 3 rute, 3 pagini, necesită reîmprospătări manuale pentru a reveni la dimensiunea sa originală sau pentru a reveni la padding-ul de 16px.

Iată codul meu pentru acest scop, în interiorul makeStyle folosesc :

    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)
        }
      }),

Și aici este array-ul meu al principleRoutes, mai sus, în același fișier :

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

Desigur, Componenta mea, în interiorul căreia se află elementul <Grid />, are props corecte declarate: pathname, deci funcționează bine, exact pe rutele la care am nevoie să funcționeze.

Vreau doar să scap de această nevoie de reîncărcare. Pentru că nu este intuitiv pentru utilizator să reîncarce manual, având în vedere că proiectul este destinat unei aplicații pe tabletă.