ReactJS:将css导入一个文件会改变整个应用程序的样式

Question

我正在使用一个名为"antd"；。它包含一个css文件(antd/dist/antd.css(，我将其导入到一个文件中。

我只想在我导入它的文件中使用样式。然而，它也会更改页眉的样式！我如何才能让它只有Content.js使用这种样式？

我在以下代码沙盒中重新创建了我的问题：

https://codesandbox.io/s/elastic-dream-5e6dp

此外，这里还有代码。

指数

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);

应用程序

import React from "react";
import Header from "./Header";
import Content from "./Content";
export default function App() {
return (
<div className="App">
<Header />
<Content />
</div>
);
}

标题

import React from "react";
export default function Header() {
return <div>This is the header, this should not be in antd styling</div>;
}

内容

import React from "react";
import "antd/dist/antd.css";
import { Table, Button, Popconfirm, Row, Col, Icon, Upload } from "antd";
export default function ExcelPage() {
return (
<div>
This should be in antd styling.
<Button>
<Icon type="upload" /> Click to Upload
</Button>
</div>
);
}

Answer 1

如果您使用最近新创建的react应用程序，您应该可以访问css模块。此功能允许您仅在导入CSS文件的地方将其绑定到JSX。在CSS模块的文档中阅读它并做出反应(https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)。最后，它应该只是通过命名你的文件"；XXX、 module.css"；。具体内容到此为止。

也可以使用SCSS文件执行此操作。这些(idk，如果这是一个CSS功能的话(允许您在顶部导入其他CSS/SCSS文件。有了那个和css/scss模块，应该可以包含您的样式。