列晒筛选

src/components/Bubble/bubbleItem.module.scss

@@ -4,7 +4,6 @@
   outline: none; // 移除浏览器默认的outline
   background: #ffffff;
   color: #333333;
-  font-size: 14px;
   font-weight: 400;
   text-align: center;
   cursor: pointer;
@@ -12,9 +11,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
   white-space: nowrap;
-  font-size: 14px;
+  font-size: 12px;
   border-radius: 28px;
   margin: 0;
   width: 116px;

src/components/Bubble/index.module.scss

@@ -20,5 +20,8 @@
   .bubbleGrid {
     display: grid;
     width: 100%;
+    .bubbleOption {
+      width: 100%;
+    }
   }
 }

src/components/Bubble/index.tsx

@@ -122,7 +122,7 @@ const Bubble: React.FC<BubbleProps> = ({
       className={styles.bubbleGrid}
       style={{
         gridTemplateColumns: `repeat(${columns}, 1fr)`,
-        gap: size === "small" ? "8px" : size === "large" ? "16px" : "12px",
+        gap: size === "small" ? "6px" : size === "large" ? "16px" : "12px",
       }}
     >
       {options.map((option) => (
@@ -133,7 +133,7 @@ const Bubble: React.FC<BubbleProps> = ({
           size={size}
           disabled={disabled}
           onClick={handleOptionClick}
-          itemClassName={itemClassName}
+          itemClassName={itemClassName || styles.bubbleOption}
         />
       ))}
     </div>