Info: How to change the ConnectButton Styling

[0xKurt]

Just like many others i encountered the problem that the ConnectButton styling can not be simply changed.
Only way is a customized button and that's pretty painful.
After some experiments i found out that you can utilize the ju367v7o CSS class to style the ConnectButton without destroying the whole modal design. It's a pretty dirty approach, but it works.

Example:

.ju367v7o {
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.85) !important;

  padding: 8px 25px !important;
  height: auto !important;

  box-shadow: 0 0 5px rgba(229, 223, 232, 0.3) !important;
  background: linear-gradient(0deg, #5e2374 0%, #ad33cc 100%) !important;

  border-radius: 5px !important;
}

Note: It's necessary to declare everything as important to overwrite the original values.

My styled ConnectButton:

All other styling is untouched:

#590 #1117

[jcislo]

Just a note. The actual class name may be different for everyone, or it changes with version/theme/settings. For me it was ju367v78.

[magiziz]

@0xKurt You can also create your own custom connect button with your own styling which should be pretty straight forward.

Feel free to follow the docs here

[Xyzjesus]

hi, i think it's not easy to rewrite a connect button from zero if i need only change button height and text-align. is't possible to make styling simpler?
@0xKurt method is awesome but need to find right className for styling

[magiziz]

We don't have a way to add height and width for the connect button. We could introduce a prop that can change the button size like "M" for medium, "L" for large and etc.

[jingjiezhou2021]

@0xKurt You can also create your own custom connect button with your own styling which should be pretty straight forward.

Feel free to follow the docs here

i tried creating my own custom connect button. It works fine except I don't know how to display the avatar of the wallet because the lib doesn't expose avatar component or generateColorFromAddress API .

The result of using custom connect button is that if you only wanna make small style change to the button, you ended up reimplementing it from scratch, redesigning the component. reimplementing responsive design, and because the lib doesn't expose enough module that consists ConnectButton , you need to hand write a lot of the features. Your goal was to change a tiny fraction of style and you ended up changed a lotta other things.

So here is my suggestion:

1. Allow passing className to ConnectButton as i talked about in feat:Allow passing classname prop to connect button #2482
2. Expose the modules that consists ConnectButton, e.g. the pure button when the wallet is not connected, the wallet info when the wallet is connected , avatar of the wallet component

[imclint21]

Agreed, completely recreate a custom button from scratch its stupid, we just need a className property, or a way to apply few CSS!

[imclint21]

do you know how works CSS compression/obfuscation? doing this is pretty shit idea, could don't work on next build, or next library release.