Semantic UI css with third party widget


We are building a third party widget. We cannot use iframe for the widget.
It is built using React and bundled using webpack.
We are using Semantic UI react components and Semantic UI less for styling.
Now, our widget will be embedded within CMS.
So we want to scope the CSS from Semantic UI so that it does not affect the parent website and parent website does not affect the styling for our widget.

Currently we scope it using the following less file:

  .widget {
    .widgetMixin() !important;


// /* Global */
& { @import "~semantic-ui-less/definitions/globals/reset"; }
& { @import "~semantic-ui-less/definitions/globals/site"; }

/* Elements */
& { @import "~semantic-ui-less/definitions/elements/button"; }
/* All the remaining elements */

But this does not work and the components/elements gets the incorrect styles.
For ex: Dropdown does not open up and width is incorrect.

It will be helpful if anyone has any pointers regarding this.
Thanks :slight_smile: