材料设计抽屉问题

Question

我有一个Codepen，其中有一个带有顶部应用栏组件的可丢弃抽屉 在将尺寸调整为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

specificity (weight)不仅仅是：

.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;
  }
}