Skip to content

className prop not working in BaseWalletConnectionButton #1068

Closed
@ayushrungta8

Description

@ayushrungta8

Describe the bug
The BaseWalletConnectionButton component in @solana/wallet-adapter-react-ui overrides custom className props with its default class. When developers pass a custom className to style the button, it gets replaced by the default wallet-adapter-button-trigger class instead of being combined with it.

To Reproduce

  1. Import BaseWalletConnectionButton from @solana/wallet-adapter-react-ui
  2. Use the component with a custom className prop:
<BaseWalletConnectionButton className="my-custom-class" />
  1. Inspect the rendered button element
  2. Observe that only wallet-adapter-button-trigger class is present, and my-custom-class is missing

Expected behavior
The component should preserve both the custom className and the default class. The rendered button should have both classes:

<button class="my-custom-class wallet-adapter-button-trigger">

Screenshots
N/A

Desktop (please complete the following information):

  • This is a component library issue that affects all environments where the library is used
  • Version: 0.9.35

Smartphone (please complete the following information):

  • Not applicable as this is a component library issue

Additional context
Current implementation in BaseWalletConnectionButton.tsx:

<Button
    {...props}
    className={`wallet-adapter-button-trigger`}
    startIcon={...}
/>

Proposed fix:

export function BaseWalletConnectionButton({ walletIcon, walletName, className, ...props }: Props) {
    return (
        <Button
            {...props}
            className={`${className || ''} wallet-adapter-button-trigger`}
            startIcon={...}
        />
    );
}

This is a common pattern in React components where we want to allow customization while maintaining base functionality. The current implementation prevents developers from applying custom styles through className props.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions