时间戳

首页 > 解决方案 > 限制外部 CSS 对本地反应组件或 HTML 元素的影响

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

问题描述

我在我的 React 应用程序的 HTML 页面中使用了一些外部 CSS。渲染组件后，外部 CSS 正在影响我的 React 组件 UI 并扭曲它们。但是，我需要外部 CSS 来呈现 Header（HTML 页面的特定部分），但不影响页面的其余元素。

是否可以将此行为限制为仅页面中少数特定元素？

我正在使用 react-scripts 进行快速应用程序开发。基于提出的方法，我可以根据需要控制构建和部署过程。

例子：

page.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" 中的元素。

标签： javascriptjqueryhtmlcssreactjs

解决方案

您可以为您的 React 应用程序创建另一个 CSS 并将其导入您的 React。在该 CSS 文件中，只需选择您的反应应用程序 ID，哪些元素将在其中呈现（在大多数情况下，ID 是根）然后选择根中的子标签或您想要选择的任何方式，然后在这种情况下给它一个样式，例如它会像：

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

推荐阅读