I have encountered a dilemma with the "antd" dependency. I imported its css file (antd/dist/antd.css) into one of my files, but now it's affecting the styling of the header as well. How can I ensure that only Content.js uses this particular styling?
To illustrate my issue, I have replicated it in the following codesandbox:
https://codesandbox.io/s/elastic-dream-5e6dp
Furthermore, here is the relevant code snippet as well.
Index
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
);
App
import React from "react";
import Header from "./Header";
import Content from "./Content";
export default function App() {
return (
<div className="App">
<Header />
<Content />
</div>
);
}
Header
import React from "react";
export default function Header() {
return <div>This is the header, this should not be in antd styling</div>;
}
Content
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>
);
}