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

Open vilasp opened this issue 4 months ago • 4 comments

Preflight checklist

[x] I could not find a solution in the existing issues, docs, nor discussions.
[x] I agree to follow this project's Code of Conduct.
[x] I have read and am following this repository's Contribution Guidelines.
[x] I have joined the Ory Community Slack.
[x] 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.