Embed Clerk React components to site with root's element font-size 1px;

[visortelle]

Hi!

For our site we have the following global CSS:

:root, 
:host {
  font-size: 1px;
}

We do it to use clear sizes like 12rem, 18rem, 24rem in our styles. We don't want to sit with a calculator for 0.35rem, 0.68rem, etc.

This is how <UserProfile /> component looks on our page.

I'm not CSS pro, but probably you can consider switching to custom units like those described here:
w3c/csswg-drafts#7613
w3c/csswg-drafts#7379

I mean something like:

:root {
  --cl-px: 1rem; /* Your customer can override this variable in his code. */
}

/* In your code it could look like it. */
.cl-card {
  max-width: calc(320 * var(--cl-px));
}

This way you can don't worry anymore that some customers for some reason use non-16px rems.

If you know a less ugly way to fix it on our side, please tell me.

Now we'll just spend a couple of hours rewriting our CSS to px. Not a big deal for the current project, but it would be great if we could use Clerk React components in other projects without rewriting our styles.

Thank you.

[clerk-cookie]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[clerk-cookie]

This issue was closed because it has been stalled for 10 days with no activity.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.