Formatting Moralis Connect Button

[Niferu]

Hello,

Does anyone have idea how we can format connect button from Moralis? I have managed to changed it's base color only, but changing font color or color after wallet connection seems to impossible as nothing works...

Changed base color:

Unable to change colors after connection:

I couldnt find any working solutions anywhere, so any help would be much appreciated

[Niferu]

Hello Guys I have found solution for this but it is a bit hmm strange and I would say it is more workaround than proper solution, but
if you want to edit any element of this button you can inspect source code of it and get class names, which looks for example like this: sc-gAigJI. Now once you get element, which you want to override you can do so in global.css file.

Here is the effect:

[Niferu]

If anyone has better solution feel free to share :)

[alymurtazamemon]

@Neftyr I do not remember properly but I think there is a style property where you can pass in-line CSS for button design.

[Niferu]

Hi @alymurtazamemon

Yes I have tried that at first and it worked but only for button in state "connect", once you are connected button cannot be formatted anymore and it does not work for text color also. Maybe I have implemented it incorrectly not sure about that..

[alymurtazamemon]

@Neftyr Yes, I also faced limitations using web3ui components while working on my projects, these are good to use as it is but very limited in customization. They provide in-line CSS to update the design of components but this is very hard when you are use to of Tailwinds CSS and you need to write in-line CSS for customization.

[Niferu]

Exactly, thanks for looking into this @alymurtazamemon. I do not like tailwind and prefer to code css code myself to learn more and my workaround shown above works perfectly fine so far and I will stick to it as there is no more proper way to edit this formatting. The important thing here it is working :D