How do you add a class to the walletconnect modal button?

Question

On the WalletConnect documentation, it says how to create a pre-styled button:

import { Web3Button } from "@web3modal/react";

interface Props {
  icon?: "show" | "hide";
  label?: string;
  balance?: "show" | "hide";
}

return <Web3Button />;

This is the result, and the class is empty:

In the code, I see it makes some reference to some classes, but how to add a custom value there? Is it even possible?

If it is not possible? How can I style that button?

Answer 1

When you change the color of the Modal theme, you can change the button colors as well.

Doc: https://docs.walletconnect.com/2.0/web/web3modal/react/wagmi/theming

<Web3Modal
    projectId={projectId}
    ethereumClient={ethereumClient}
    themeMode="dark"
    themeVariables={{
          '--w3m-font-family': 'Roboto, sans-serif',
          '--w3m-accent-color': '#',
          '--w3m-accent-fill-color': '#',
          '--w3m-background-color': '#',
    }}
/>