有什么方法可以忽略其他叶子页面和父页面对我的反应页面的 css 影响答案

【问题标题】：Are there any method to ignore the css affections of other leaf pages and parent pages to my react pages有什么方法可以忽略其他叶子页面和父页面对我的反应页面的 css 影响
【发布时间】：2021-09-24 13:28:19
【问题描述】：

我正在与我的小组作为初学者开发一个反应应用程序。以前一切正常。但是当我们进行集成时，通过将所有 CSS 脚本应用于所有前端页面会发生几个 CSS 问题，即使我们已经在叶子节点上调用了它们。（例如，我的朋友在 java 脚本页面的末尾添加了她自己的 CSS 脚本（页面），我在我的 java 脚本页面中添加了我的 CSS 页面，即使这两个页面都没有连接，但应用的 CSS 页面正在影响到整个项目，甚至是父页面）

一一调用类名很难再做项目。

是否有简单的方法可以忽略这种 CSS 影响？

【问题讨论】：

标签： javascript css reactjs bootstrap-4 css-selectors

【解决方案1】：

如果您在组件 A 中工作，您可以在其中添加 className 或 id。基于此，您可以分离 css。

const A = (props) => {
  return (
    <div className="A">
      <h1>Hi {props.name}!</h1>
      <div>Welcome to React</div>
    </div>
  );
};

如果你只想对组件A使用css，可以加like

.A div {
  color: #bbb;
}

即使你的类名在整个应用程序中都是相同的，这只会影响你的组件。

在存在相同的父名称（组件名称）之前，它不会影响任何其他页面。

【讨论】：

非常感谢您的宝贵反馈，我们可以通过添加类名来更改项目，但问题可以通过忽略其他叶子节点（页面）CSS部分对这些的影响来解决叶节点（页）。例如，我们所做的一些其他框架，如 ASP.net/ 或与我们正在为其他页面编写一个页面的 CSS 脚本无关的事情。有什么方法可以在这里编码，REACT。

【解决方案2】：

假设您可以在该元素上设置唯一的类或 id，您可以使用（有限浏览器支持）属性 all 并将其设置为未设置或初始

类似

<div class="ignore-css"><div>

和

.ignore-css{all:unset;}

【讨论】：

非常感谢您的友好和宝贵的反馈，因此，通过这种方法，我们可以通过忽略其他元素来使用该特定元素所需的 CSS 部分。我们可以通过添加类名来更改项目，但是可以通过忽略其他叶子节点（Pages'）CSS部分对这些叶子节点（Pages）的影响来简单地解决问题。例如，我们所做的一些其他框架，如 ASP.net/ 或与我们正在为其他页面编写一个页面的 CSS 脚本无关的事情。有什么方法可以在这里编码，REACT。
是的。添加名为“ignore-css”或任何您喜欢的类，然后添加属性“all:unset”基本上会将项目“重置”为其初始css。