Topic: scoping all react app styles inside a global #root element
Expected behavior
I've developed a React application and built it using the React MDB library. After integrating the app into a WordPress page via Reactpress, I noticed that the MDB styles are affecting other elements on the WordPress site. Is there a way to isolate the MDB styles[ and all css potentially ] so they only apply within the React app? The React app is hosted within a div with the ID #root on the WordPress page.
some files causing the issues
_reboot.scss
_variables.scss
Actual behavior
Resources (screenshots, code snippets etc.)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 6.3.0
- Device: computer
- Browser: chrome
- OS: windows 11
- Provided sample code: Yes
- Provided link: No
Mateusz Lazaru staff commented 6 months ago
At the moment, there is no way to isolate minified css to the single page or component.
I would try to import only the styles you need, or comment out the conflicting styles in
_reboot.scssand_variables.scssolis-servicedesk@legmt.gov priority commented 6 months ago
what do you mean by "I would try to import only the styles you need," ?