ReactJS：将CSS导入一个文件会更改整个应用程序的样式

问题描述

我正在使用一个称为“ 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>
  );
}

解决方法

如果您使用的是新近创建的create-react-app，则应该可以访问css-modules。此功能允许您仅将CSS文件捆绑到JSX导入的位置。在CSS模块的文档中阅读有关内容并做出反应（https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/）。最后，应该通过命名文件“ XXX.module.css”来解决。这么多的特异性。

您也可以使用SCSS文件来实现。这些（idk，如果那是CSS的功能）则允许您在顶部导入其他CSS / SCSS文件。使用that和css / scss模块，应该很有可能包含您的样式。

antd reactjs reactjs