gpt4 book ai didi

javascript - 限制外部 CSS 对本地 React 组件或 HTML 元素的影响

转载 作者:太空宇宙 更新时间:2023-11-04 06:13:51 25 4
gpt4 key购买 nike

我在我的 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com