fix(alert): propagate className

frontio-ai · Jan 11, 2025 · 6b78c9d · 6b78c9d
1 parent eada8cb
commit 6b78c9d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/hot-owls-sniff.md b/.changeset/hot-owls-sniff.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/alert": patch
+---
+
+propagate className (#4533)
diff --git a/packages/components/alert/src/use-alert.ts b/packages/components/alert/src/use-alert.ts
@@ -7,7 +7,7 @@ import {ReactNode, useCallback, useMemo} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {alert} from "@nextui-org/theme";
 import {useControlledState} from "@react-stately/utils";
-import {dataAttr, isEmpty, objectToDeps} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, isEmpty, objectToDeps} from "@nextui-org/shared-utils";
 
 interface Props extends HTMLNextUIProps<"div"> {
   /**
@@ -103,6 +103,7 @@ export function useAlert(originalProps: UseAlertProps) {
     closeButtonProps = {
       size: "sm",
     },
+    className,
     classNames,
     ...otherProps
   } = props;
@@ -123,8 +124,11 @@ export function useAlert(originalProps: UseAlertProps) {
     onClose?.();
   }, [setIsVisible, onClose]);
 
+  const baseStyles = clsx(classNames?.base, className);
+
   const slots = useMemo(
-    () => alert({hasContent: !isEmpty(description) || !isEmpty(children), ...variantProps}),
+    () =>
+      alert({hasContent: !isEmpty(description) || !isEmpty(children), ...variantProps, className}),
     [description, objectToDeps(variantProps)],
   );
 
@@ -140,9 +144,9 @@ export function useAlert(originalProps: UseAlertProps) {
         }),
         filterDOMProps(props),
       ),
-      className: slots.base({class: classNames?.base}),
+      className: slots.base({class: baseStyles}),
     };
-  }, [slots, classNames?.base]);
+  }, [slots, baseStyles]);
 
   const getMainWrapperProps = useCallback<PropGetter>(() => {
     return {