I'm facing an issue with my react application. The App.js fragment is displayed below:
import ServiceManual from './components/pages/ServiceManual'
import './App.css';
const App = () => {
return (
<>
<Router>
<Switch>
<Route path='/ServiceManual' exact component={ServiceManual} />
<Route path='/' exact component={Home} />
</Switch>
</Router>
</>
)
};
The ServiceManual component has its own ServiceManual.module.css
import React from 'react';
import { Container } from 'react-bootstrap';
import '../App.css';
import './ServiceManual.module.css';
export default function ServiceManual() {
return <Container fluid className="mainPage">
....
However, some definitions in the ServiceManual.module.css seem to be affecting the content of my Home page.
It appears that importing the component in the App.js file creates a large container where all imported definitions end up.
I've come across suggestions online to rename xxx.module.css as opposed to xxx.css for a .css file intended only for the module where it's imported. But this approach doesn't seem to solve the issue.
Upon inspecting the browser debugger on my home page, I notice some .css definitions (from xxx.module.css) that shouldn't be there, altering the display of my homepage.
Does anyone have any insights or advice on how to resolve this?