材料设计抽屉问题

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