material 设计抽屉问题

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

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