проблема с дизайном материала

Question

У меня есть кодовый блок, в котором есть ящик для хранения с компонентом верхней панели приложения который при изменении ширины до 598px ширина верхней панели приложения уменьшается с 64px до 56px но при использовании запроса @media для выравнивания ящик не выравнивается, можете ли вы дать решение для этого

codepen >>> https://codepen.io/BhavyaSingh2003/pen/NJbGoO

 @media all and (max-width: 599px) {
 .mdc-drawer--dismissible {
   top: 56px;
   height: calc(100% - 56px);
  }
}

Answer 1

Это объявление CSS:

.app-drawer-layout .mdc-drawer--dismissible

имеет более специфичность (вес) , чем просто:

.mdc-drawer--dismissible

Таким образом, вы можете написать селектор с той же специфичностью:

@media all and (max-width: 599px) {
  .app-drawer-layout .mdc-drawer--dismissible {
    top: 56px;
    height: calc(100% - 56px);
  }
}

... или добавьте !important в свой CSS:

@media all and (max-width: 599px) {
  .mdc-drawer--dismissible {
    top: 56px !important;
    height: calc(100% - 56px) !important;
  }
}