筛选组件开发

src/components/Bubble/BubbleItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BubbleOption } from './index';
-import './bubbleItem.scss';
+import styles from './bubbleItem.module.scss';
 
 export interface BubbleItemProps {
   option: BubbleOption;
@@ -8,6 +8,7 @@ export interface BubbleItemProps {
   size: 'small' | 'medium' | 'large';
   disabled: boolean;
   onClick: (option: BubbleOption) => void;
+  itemClassName?: string;
 }
 
 const BubbleItem: React.FC<BubbleItemProps> = ({
@@ -15,19 +16,20 @@ const BubbleItem: React.FC<BubbleItemProps> = ({
   isSelected,
   size,
   disabled,
-  onClick
+  onClick,
+  itemClassName
 }) => {
   return (
     <button
-      className={`bubble-option ${size} ${isSelected ? 'selected' : ''} ${
-        option.disabled || disabled ? 'disabled' : ''
-      }`}
+      className={`${styles.bubbleOption} ${size} ${isSelected ? styles.selected : ''} ${
+        option.disabled || disabled ? styles.disabled : ''
+      } ${itemClassName ? itemClassName : ''}`}
       onClick={() => onClick(option)}
       disabled={option.disabled || disabled}
     >
-      {option.icon && <span className="bubble-icon">{option.icon}</span>}
-      <span className="bubble-label">{option.label}</span>
-      {option.description && <span className="bubble-description">{option.description}</span>}
+      {option.icon && <span className={ styles.bubbleIcon}>{option.icon}</span>}
+      <span className={styles.bubbleLabel}>{option.label}</span>
+      {option.description && <span className={ styles.bubbleDescription}>{option.description}</span>}
     </button>
   );
 };