Custom theme breaks with @ory/elements-react v1.1

[vilasp]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Ory Network Project

No response

Describe the bug

Hey!

We have a custom UI set up with Ory and we have been following the setup in the docs. All have worked well (with minor changes since we had this setup before v1.0 was released) but now with v1.1 (which we need) our styling breaks.
Looking at the release notes this commit seems to be the offender and it looks like the docs have not been updated to match.

If I replace :root with .ory-elements in our SASS setup and also add the ory-element class to our Card root override component we get most of our styling back but there seem to be cases where Ory styling cannot be overridden since Ory:s CSS has higher specificity. As an example I attached our own header component with after and before the update and you can see the issue.

Before	After

Reproducing the bug

Not tested

Relevant log output

Relevant configuration

Version

1.1

On which operating system are you observing this issue?

macOS

In which environment are you deploying?

Other

Additional Context

No response

[jonas-jonas]

Hi, thanks for the report. We've published a release candiate version (https://www.npmjs.com/package/@ory/elements-react/v/1.2.0-rc.0) that should hopefully resolve this. Could you confirm this resolves the issue for you?

In essence, I've moved the styles from being "unlayered" to its own ory-elements layer. Unlayered styles should now take precendence over our included styles, even if the individual specificity is lower. Read more about CSS layers here: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

[vilasp]

Hey again @jonas-jonas!

Yes it seems to do the trick 👏 , thank you for fixing it. I am however seeing some other issues that I'm wondering if they are a regression or something on our side. To be clear about our setup the custom UI currently does the following,

1. We Use Ory elements to render the form
2. We Override some components of Card like Header, Footer, Root.
3. We Override Social sign in buttons with DefaultButtonSocial.WithLogos just to change the Apple logo
4. We don't change any input or submit buttons

The errors we are seeing are,

1. (On Ory, seem to have existed in previous version): The social sign in buttons (we have both google and apple) seems to throw a react unique key error when being rendered.
2. (Not sure): The social sign in buttons have lost their hand cursor, there is no indication these buttons are hoovered any more.
3. (Not sure ): The submit button is getting a weird transition when rendered, it looks like it goes from passive to active state.

I will further investigate 2 and 3 but it would be great to see if you can see the same issue we are on 1.

//Villiam

[jonas-jonas]

Hi, thanks for the added context. We've been working on a larger (internal) change to allow easier overriding of the default components. It will likely take a couple more days, but I'll let you know once there's something for you to test. These changes should resolve all these issues. Thanks for your patience.

[jonas-jonas]

We've just released a new RC, that should resolve these issues. Would you be able to test v1.2.0-rc.1 in your current setup? It also contains a bunch of improvements for custom components.