3

I am a newbie to React/Typescript and I am trying to build a DeFi project using the Solana Wallet adapter. From what I can see the wallet adapter comes with a React UI look and feel based on the Solana colour scheme.

I want to use a different colour scheme for my project. Is there a way to override the default colour scheme in the wallet adapter code? At present, I removed the UI imports i.e.

import {
    WalletModalProvider,
    WalletDisconnectButton,
    WalletMultiButton
} from '@solana/wallet-adapter-react-ui';

and the wallet button looks like this:

wallet button without wallet-adapter-react-ui

It doesn't look particularly good or professional. I am trying to do a POC for a presentation. I feel like I would need to invest a lot of time to customise it manually. I don't have that time, plus I could do all that work and then find out there was an easier approach.

Any help/advice would be appreciated.

1 Answer 1

3

The wallet adapter styles can be added like so

require("@solana/wallet-adapter-react-ui/styles.css");

You can also find the class naming convention and override the css.

1
  • Thank so much. I copied over the CSS file into my project and changed the colours there and it worked perfectly. Thanks again. Commented Aug 18, 2022 at 19:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.