feat(theme): doc-layout paragraph components merge class-names

web-infra-dev · ap0nia · Nov 21, 2024 · Nov 21, 2024 · Nov 21, 2024 · Nov 21, 2024
commit ab84f74a8919d702ec97012e340178e7864f5d5d
diff --git a/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx b/packages/theme-default/src/layout/DocLayout/docComponents/paragraph.tsx
@@ -1,19 +1,31 @@
 import type { ComponentProps } from 'react';
 import styles from './index.module.scss';
 
+import clsx from '../../../utils/tailwind';
+
 export const P = (props: ComponentProps<'p'>) => {
-  return <p {...props} className="my-4 leading-7" />;
+  const { className, ...restProps } = props;
+
+  return <p {...restProps} className={clsx('my-4 leading-7', className)} />;
 };
 
 export const Blockquote = (props: ComponentProps<'blockquote'>) => {
+  const { className, ...restProps } = props;
+
   return (
     <blockquote
-      {...props}
-      className={`border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500 ${styles.blockquote}`}
+      {...restProps}
+      className={clsx(
+        'border-l-2 border-solid border-divider pl-4 my-6 transition-colors duration-500',
+        styles.blockquote,
+        className,
+      )}
     />
   );
 };
 
 export const Strong = (props: ComponentProps<'strong'>) => {
-  return <strong {...props} className="font-semibold" />;
+  const { className, ...restProps } = props;
+
+  return <strong {...restProps} className={clsx('font-semibold', className)} />;
 };