Angular中如何在其他模块重定义并关闭全局body样式

你在module2组件样式里写的覆盖规则没效果，本质是模块化前端框架默认做了样式作用域隔离：组件内编写的样式默认只会作用于当前组件内部渲染的DOM节点，根本匹配不到顶层的html、body全局标签，就算加了!important也碰不到这两个节点，自然不会生效。

方案1：通过路由动态切换根节点类名（最优，无副作用） #

这是多模块项目处理全局根节点样式差异的通用方案，不会出现样式污染：

1. 先修改app目录下的全局index.scss，把原来直接写在html、body上的宽度、边距规则，绑定到专属类名上：

// 其他全局通用样式保留不变
html,
body {
  // 这里放所有模块都通用的全局样式，比如默认字体、重置样式等
}

// 仅在非module2模块生效的布局样式
html.layout-default,
body.layout-default {
  max-width: 1400px;
  margin: auto;
}

2. 在非module2的根组件/默认路由初始化逻辑里，给html、body节点加上layout-default类名；在进入module2模块时移除这个类名，离开module2时再加回来即可。
   不管你用的是Angular/Vue/React，逻辑都是一致的，以Angular为例，在module2的主组件生命周期里加如下逻辑：

// 组件初始化、进入module2时执行
ngOnInit(): void {
  document.documentElement.classList.remove('layout-default');
  document.body.classList.remove('layout-default');
}

// 组件销毁、离开module2时执行
ngOnDestroy(): void {
  document.documentElement.classList.add('layout-default');
  document.body.classList.add('layout-default');
}

方案2：在组件内写全局样式覆盖（不推荐，容易留样式污染） #

如果不想改原有全局样式的写法，可以在module2组件内手动声明跳过样式隔离，直接写全局选择器覆盖，但必须在离开模块时重置样式，否则会影响其他模块：

• Angular项目可以用::ng-deep穿透作用域：

:host ::ng-deep html,
:host ::ng-deep body {
  max-width: unset !important;
  margin: 0 !important;
}

• Vue项目可以去掉组件style标签的scoped属性，或者用:global()包裹选择器：

:global(html, body) {
  max-width: unset !important;
  margin: 0 !important;
}

注意：用这个方案必须在module2组件销毁时，手动把html、body的max-width和margin改回原值，否则切到其他模块时全局样式会错乱。

不要直接删除全局写的1400px宽度限制，否则其他已经适配好这个宽度的模块都会出现样式错乱，后续维护成本很高。

内容的提问来源于stack exchange，提问作者Glupiy