How to override default styling that has !important on it in the prebuilt UI? The Google Icon has an...

zhef.

01/04/2024, 8:16 AM

How to override default styling that has !important on it in the prebuilt UI? The Google Icon has an extra margin left for some reason

rp_st

01/04/2024, 8:17 AM

hey @zhef.

rp_st

01/04/2024, 8:17 AM

@porcellus can help here.

zhef.

01/04/2024, 8:18 AM

Okay, thanks!

zhef.

01/04/2024, 8:58 AM

And by the way, I'm aware that it looks fine without modifying the font.

porcellus

01/04/2024, 9:02 AM

hi. this is something we can (and will) improve in the future. for now I think you could add another selector before the data-supertokens one. I.e.:

div[data-supertokens~=providerButtonLeft]

zhef.

01/04/2024, 9:07 AM

Thanks for the idea! I did it with

Copy code

button div[data-supertokens~="providerButtonLeft"] {
                    margin-left: 0px !important;
                  }

porcellus

01/04/2024, 9:08 AM

happy to help. 🙂

porcellus

01/04/2024, 9:08 AM

there are a few `!important`s in our code that I'm planning to remove to avoid exactly these issues, I just haven't got around to it yet.

rp_st

01/04/2024, 9:09 AM

@porcellus can you add this to your sprint please? Also, to cehck why there is an extra padding here..

rp_st

01/04/2024, 9:10 AM

@zhef. , it would be awesome if you could open an issue about this, so we can keep track of the progress

zhef.

01/04/2024, 9:10 AM

haha it's a bit weird to center elements with margin left

zhef.

01/04/2024, 9:10 AM

Will do. Thanks guys.

Previous Next

SuperTokens.com

SuperTokens is an open source authentication solution offering features like: Different types of login: Email / password, Passwordless (OTP or Magic link based).