Description
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, andmy-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.