Topic: scoping all react app styles inside a global #root element

olis-servicedesk@legmt.gov priority asked 3 months ago


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.)


Mateusz Lazaru staff commented 3 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.scss and _variables.scss


olis-servicedesk@legmt.gov priority commented 2 months ago

what do you mean by "I would try to import only the styles you need," ?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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