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
- Import BaseWalletConnectionButton from @solana/wallet-adapter-react-ui
- Use the component with a custom className prop:
<BaseWalletConnectionButton className="my-custom-class" />
- Inspect the rendered button element
- 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.
Describe the bug
The
BaseWalletConnectionButtoncomponent in@solana/wallet-adapter-react-uioverrides custom className props with its default class. When developers pass a custom className to style the button, it gets replaced by the defaultwallet-adapter-button-triggerclass instead of being combined with it.To Reproduce
wallet-adapter-button-triggerclass is present, andmy-custom-classis missingExpected behavior
The component should preserve both the custom className and the default class. The rendered button should have both classes:
Screenshots
N/A
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Current implementation in BaseWalletConnectionButton.tsx:
Proposed fix:
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.