我正在开发一个Reaction应用程序，并且面临着一个关于CSS呈现的问题.我的应用程序包括两个主要组件<Product />和<MainPage />，每个组件都引用它们自己的CSS文件(分别为product.css和main.css).然而，我遇到了一个问题，这两个CSS文件都是全局应用的，这导致了两个页面之间的样式冲突.
以下是My App组件的简化版本:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Header from './header.js';
import { useState } from "react";
import Product from './product.js';
import MainPage from './main.js';
function App() {
const [selectedProduct, setSelectedProduct] = useState(null);
return (
<div>
<Header />
{selectedProduct ? <Product product={selectedProduct} /> : <MainPage onSelectProduct={setSelectedProduct} />}
</div>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
每个组件(<Product />和<MainPage />)在其各自的JS文件的顶部导入其CSS文件.我试图确保只在呈现组件时应用main.css，并且仅在呈现组件时应用duct.css.我如何实现这种隔离，以便每个页面只使用其各自的CSS，而不影响其他页面？
我曾考虑使用css模块，但我正在寻找一种不同的方法.如能就如何解决这一问题提供任何意见或建议，我们将不胜感激.