iTwin/iTwinUI-react

Scoped styles

Closed this issue · 5 comments

jptissot commented

Feature

Related to: iTwin/viewer#201

I would like to be able to render an iModel in a div on a page and be contained within that div. However, the iModel adds classes to the body instead of adding them to the container div where the iModel is rendered. I think this may also fix another issue I have noticed: the popovers are rendered at the bottom of the page:

image

bentleyvk commented

Hi @jptissot, could you provide us a codesandbox with repro?

raplemie commented

I dont have a solution for this at the moment, but keep in mind that even if we manage to put the viewer correctly in a div, you will be restricted to a single viewer in the page. If having more than one viewer displayed on the dashboard is part of your requirement, you might want to explore having an iFramed version instead, even though it is not great, it should fix the issues you are seeing.

jptissot commented

Thank you for the responses. We don't intend to put more than one iModel inside a single dashboard at the moment. If we could remove the body classes and fix the position of the popups that would be a great start.

mayank99 commented

@jptissot Thanks for the issue. We are definitely planning to allow more control over the body/root styles. It will likely look something like this:

<body>
  // ... rest of your app

  <ThemeProvider>
    // ... scoped content, e.g. <Viewer />
  </ThemeProvider>

</body>

Worth noting that the "Viewer" (or "iModel") don't actually come from iTwinUI, they just consume our components. So I'm renaming this issue.

Also, can you open a separate issue for the popover bug and include a sandbox? I think it will need a separate fix because I doubt it will be solved by this scoping feature.

  • 👍1
mayank99 commented

Scoped roots are now supported in v2 🎉

The snippet I pasted above is exactly how you do it:

<body>
  // ... rest of your app

  <ThemeProvider>
    // ... scoped content, e.g. <Viewer />
  </ThemeProvider>

</body>
  • 👍1