Styling the web3uiKit connect button

Is there a way to style the web3uiKit connect button to a different color?

If the button has a theme property, remove it, and a color property.

1 Like

Thanks but could you explain this a bit better.
I didn’t quite get you

Hi you could edit the styles file ConnectButton.styles.ts at src/components/ConnectButton/ in your project.

Otherwise another way is to use an outer element like a div or any element that’s already around your <ConnectButton> and select the button in CSS and override its colour property.

1 Like

Alright thanks will try this out!

Tried this. Still didn’t work, I understand that there are different styles already preset like black e.t.c
I used them but they didn’t reflect on the button, also tried manually selecting the button as a direct child in a div that I wrapped around it using css.
Also didn’t work.

what’s the latest version that works with react 17.0.2? web3uikit 0.1.156 gives react 18 dependency errors.

Latest one you can use without immediate install errors is 0.1.121.

Awesome thanks glad, that’s a bit behind , any work arounds to get the version higher? Would like to be on the edge with this one.

You could try a force install of the latest web3uikit and try things out, using the components. But it’ll be more difficult to get help since it’s not supported and all sorts of issues could happen.

But if you want to use the latest version(s), ideally you transition your project to React 18.