css - 材料设计抽屉问题

Question

我有一个 codepen，其中有一个带有顶部应用栏组件的可关闭抽屉，在调整到 598px 宽度时，顶部应用栏宽度从 64px 减小到 56px 但是当使用@media 查询对齐它时，抽屉没有对齐请你给一个解决方案

代码笔 >>> 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;
  }
}