我在我的 React 应用程序的 HTML 页面中使用了一些外部 CSS。渲染组件后，外部 CSS 会影响我的 React 组件 UI 并扭曲它们。但是，我需要外部 CSS 来呈现页眉(HTML 页面的特定部分)但不影响页面元素的其余部分。
是否可以将此行为限制为仅针对页面中特定的几个元素？
我正在使用 react 脚本来快速开发应用程序。根据建议的方法，我可以根据需要控制构建和部署过程。
例子:
页面.html
<html>
<head>
<meta charset="utf-8" />
<title>Test HTML</title>
<link rel="stylesheet" href="page.css"/>
</head>
<body>
<div id="outer">
<h1>This is an outer H1/h1>
<p>This is an outer P</p>
</div>
<div id="inner">
<h1>This is an inner H1</h1>
<p>This is an outer P</p>
</div>
<div id="root"></div> <!-- This is where my React components would be
rendered -->
</body>
页面.css
@charset-"utf-8";
h1 {color:red}
p {color:green}
body {font-weight:bold;}
我希望外部 css 文件 page.css 不影响 div id="inner"部分中的 h1 和 p 标签以及将呈现到 div id="root"中的元素。
最佳答案
您可以为您的 React 应用程序创建另一个 CSS 并将其导入您的 React。在该 CSS 文件中，只需选择您的 React App Id，哪些元素将在那里呈现(在大多数情况下，Id 是 root)，然后选择 root 中的子标签或您想要选择的任何方式，然后在这种情况下为其提供样式，例如它会像:
app.css in there you can select like
#root h1 {color:white} and ....
and import it like import "./app.css" ("./YourCssAddress.css") to your react app
关于javascript - 限制外部 CSS 对本地 React 组件或 HTML 元素的影响，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56172696/