如何仅禁用一个组件的主体样式答案

【问题标题】：how can i disable a body style for only one component如何仅禁用一个组件的主体样式
【发布时间】：2020-09-22 05:18:30
【问题描述】：

我只想为一个组件禁用overflow-y: hidden 样式。这种风格在我的 style.scss 中是这样的

body {
overflow-y: hidden;
}

我在我的组件中尝试过，但没有成功。

<div class="div1" style="overflow-y: visible !important;">
...
</div>

【问题讨论】：

标签： html css angular frontend

【解决方案1】：

它不起作用，因为这个 div 在一个不可见的 body 内部，并且没有办法告诉 body 在不显示它的情况下显示它。

在你的情况下，不改变架构是不可能的。

你需要像下面的代码那样做。

<body>
  <div class="new-body-root"> <!-- move all body styles here -->
    ... all the code
  </div>
  <div class="div1"> <!-- now it's always visible, hide it when you don't need it -->
    ...
  </div>
</body>

【讨论】：

身体不是隐形的，它有一个隐形的溢出
我在答案中写了不同的东西吗？他需要更改overflow-y: hidden 和所有其他主体逻辑将应用于class="new-body-root" 的架构。

【解决方案2】：

你能不能试一下

.visibleClass{overflow-y: visible ;}

到body css属性下的style.css

在 appcomponent.html 中添加激活事件到router-outlet

<router-outlet (activate)="showHideNav($event)"></router-outlet>

然后在component.ts中

 showHideNav(event){
    event instanceof YourComponent ? document.body.classList.add("visibleClass") :
                                     document.body.classList.remove("visibleClass")
  }

【讨论】：

您不应该在 CSS 的第一行使用 !important 标签。这里没有必要。