My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application.
To achieve this, I provide website owners with minified JS and CSS files that they can insert into their webpages using
<script src="my-module.min.js"><link href="my-module.min.css" type="text/css" rel="stylesheet">To prevent style conflicts, I ensure that my CSS classes are prefixed with a unique identifier for my module. For example, instead of using the class page-container, I would use my-module-123-page-container. This approach allows me to avoid overriding properties of similarly named classes on the hosting website.
However, a challenge arises when dealing with imported CSS files. If my app relies on a library like Material-UI, there may be generic class names defined in the stylesheets that I cannot easily prefix to maintain uniqueness.
I have considered two potential solutions:
- Separating the UI presentation by placing it within an
iframe, ensuring complete isolation of styles from the hosting website. - Modifying the dependency by renaming all classes and adjusting React components accordingly, although this approach may be complex and time-consuming.
Both options present drawbacks, and I am seeking guidance on alternate approaches. It seems like a common concern among products designed for embedding in external websites while maintaining distinct styling.
If you have any suggestions or insights, please share. Thank you!