Далее JS добавляет стили, которые я не использую

Question

Я использую Next JS (9) SSR с компонентами MUI.

По какой-то причине, когда я запускаю сборку (мой процесс сборки стандартный, я просто запускаю next build), я заканчиваю со страницами, которые содержат сотни (1000+) строк CSS, которые я даже не использую.

например - я буду использовать md = {6} в компоненте, но Next JS построит он должен включать каждый отдельный md-x

  .MuiGrid-grid-md-auto {
    flex-grow: 0;
    max-width: none;
    flex-basis: auto;
  }
  .MuiGrid-grid-md-true {
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 0;
  }
  .MuiGrid-grid-md-1 {
    flex-grow: 0;
    max-width: 8.333333%;
    flex-basis: 8.333333%;
  }
  .MuiGrid-grid-md-2 {
    flex-grow: 0;
    max-width: 16.666667%;
    flex-basis: 16.666667%;
  }
  .MuiGrid-grid-md-3 {
    flex-grow: 0;
    max-width: 25%;
    flex-basis: 25%;
  }
  .MuiGrid-grid-md-4 {
    flex-grow: 0;
    max-width: 33.333333%;
    flex-basis: 33.333333%;
  }
  .MuiGrid-grid-md-5 {
    flex-grow: 0;
    max-width: 41.666667%;
    flex-basis: 41.666667%;
  }
  .MuiGrid-grid-md-6 {
    flex-grow: 0;
    max-width: 50%;
    flex-basis: 50%;
  }
 ...

Я буду использовать Paper, поэтому будет включена каждая отметка

 .MuiPaper-elevation0 {
    box-shadow: none;
  }
  .MuiPaper-elevation1 {
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
  }
  .MuiPaper-elevation2 {
    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
  }
  .MuiPaper-elevation3 {
    box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12);
  }
...

Это касается интервалов, обтекания и так далее. Я получаю сотни стилей, которые я даже не использую.

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