feat:Allow passing classname prop to connect button

[jingjiezhou2021]

I’m currently using the ConnectButton component, and I’ve noticed that it doesn’t support passing a className prop. This makes it a bit difficult to customize styling using utility-based frameworks like Tailwind CSS.

#1465 I also see this discussion where people complaining the same lack of support for missing an approach to provide custom css class and end up using a hack approach

#1117 And this one

I am aware of using a customized ConnectButton.custom and implementing render function from scratch is one way to apply custom styling, but in my opinion letting the user to reimplement of the build in button only to change the style might cause inconsistency with the lib and it's complicated. Maybe a user just wanna change the backgroud color of the button and now he has to rewrite the whole button.

I found in source code that ConnectButton component has two main states:

• Connected: shows wallet/account/chain info

• Unconnected: shows a "Connect Wallet" button

🔧Suggested Change:

Add a className prop to ConnectButton and apply it to the outer <Box as="button" /> element only in the unconnected state. This allows consumers to pass custom class names without affecting the layout or behavior of the connected state UI.

--- a/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx
+++ b/packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx
@@ -38,7 +38,8 @@ export function ConnectButton({
   chainStatus = defaultProps.chainStatus,
   label = defaultProps.label,
   showBalance = defaultProps.showBalance,
-}: ConnectButtonProps) {
+  className,
+}: ConnectButtonProps & { className?: string }) {
   const chains = useRainbowKitChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
@@ -269,7 +270,7 @@ export function ConnectButton({
                 className={touchableStyles({
                   active: 'shrink',
                   hover: 'grow',
-                })}
+                }).concat([className])}
                 color="accentColorForeground"
                 fontFamily="body"
                 fontWeight="bold"

✅Result:

Passing className to ConnectButton won't trigger type error:

The className is applied to the ConnectButton and taking effect: