在不同页面上启用禁用 CSS 样式，特别是 *、html、正文标签

Question

*, *::after, *::before {
  box-sizing: border-box;
 }



html, body {
  font-size: 100%;
  scroll-behavior: smooth;
  position: relative;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #141414;
  color:#fff;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.2;


}

main { 
  margin : 0;
  padding: 0;;
}

上面的 css（包含通配符，html，body，main）我正在导入到我的应用程序的组件中，没有使用 css 模块。 问题是它们在使用自己的 css 的不同路由和页面上与 styles 冲突。

它不是像<link rel='stylesheet' id=这样的外部样式表，因此它没有id ，它只是显示为<style type="text/css">...</style>,... in <head>

问题：
上面的 css 我只想在一个路由上启用，例如我想在/a页上启用它，但我想在/b页上完全重置或删除它们。 我该如何做到这一点？

我还看到了React Routes - body css 标签上的不同样式以及如何将 CSS 应用于 HTML 主体元素？

Answer 1

对此有不同的解决方案，但最好的解决方案似乎是在第一次安装组件时为主体添加不同的 class 名称，并在卸载时删除此 class 名称。 其他解决方案是在具有以下 css 功能的组件中使用主 div

 { 
      position: absolute;
      top:0;
      bottom:0;
      right:0;
      left:0;
    }

然后 body 将留在这个 div 后面，你可以在这个 div 中做你想要的每一个修改。 但我真的建议你使用第一种方式。

在不同页面上启用禁用 CSS 样式，特别是 *、html、正文标签

问题描述

1 个解决方案

解决方案1
1 2021-05-23 19:13:30

在不同页面上启用禁用 CSS 样式，特别是 *、html、正文标签

问题描述

1 个解决方案

解决方案1 1 2021-05-23 19:13:30

解决方案1
1 2021-05-23 19:13:30