refactor(classname): 调整 classname 的顺序 (#1637)

* refactor(classname): 调整 classname 的顺序 * refactor(classname): 测试快照更新
jdf2e · Nov 15, 2023 · 8d1a0d8 · 8d1a0d8
1 parent 11409cb
commit 8d1a0d8
Show file tree

Hide file tree

Showing 73 changed files with 298 additions and 167 deletions.
diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`Address: exist defaultIcon & selectIcon 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="round nut-popup nut-popup-bottom "><div class="nut-popup-title">请选择地址</div><div class="nut-popup__close-icon nut-popup__close-icon--top-right"><svg class="nut-icon nut-icon-Close " style="width: 12px; height: 12px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" aria-labelledby="Close" role="presentation"><path d="M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z" fill="currentColor" fill-opacity="0.9"></path></svg></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><div class="default">123</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item active"><div class="select">456</div><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
 
-exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="round nut-popup nut-popup-bottom "><div class="nut-popup-left-icon"></div><div class="nut-popup-title">选择地址</div><div class="nut-popup__close-icon nut-popup__close-icon--top-right"><svg class="nut-icon nut-icon-Close " style="width: 12px; height: 12px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" aria-labelledby="Close" role="presentation"><path d="M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z" fill="currentColor" fill-opacity="0.9"></path></svg></div><div class="nut-cascader "><div class="nut-tabs nut-tabs--horizontal" value="c1"><div class="nut-tabs__titles nut-tabs__titles--line nut-tabs__titles--scrollable"><div class="nut-tabs__titles-item nut-tabs__titles-item--active"><span class="nut-tabs__titles-item__text">请选择</span><span class="nut-tabs__titles-item__line"></span></div></div><div class="nut-tabs__content__wrap"><div class="nut-tabs__content" style="transform: translate3d(--100%, 0, 0); transition-duration: 300ms;"><div class="active nut-tabpane"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item__title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item__title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item__title">福建</div></div></div></div></div></div></div></div></div>"`;
+exports[`Address: show custom 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="round nut-popup nut-popup-bottom "><div class="nut-popup-left-icon"></div><div class="nut-popup-title">选择地址</div><div class="nut-popup__close-icon nut-popup__close-icon--top-right"><svg class="nut-icon nut-icon-Close " style="width: 12px; height: 12px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" aria-labelledby="Close" role="presentation"><path d="M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z" fill="currentColor" fill-opacity="0.9"></path></svg></div><div class="nut-cascader "><div class="nut-tabs nut-tabs--horizontal" value="c1"><div class="nut-tabs__titles nut-tabs__titles--line nut-tabs__titles--scrollable"><div class="nut-tabs__titles-item nut-tabs__titles-item--active"><span class="nut-tabs__titles-item__text">请选择</span><span class="nut-tabs__titles-item__line"></span></div></div><div class="nut-tabs__content__wrap"><div class="nut-tabs__content" style="transform: translate3d(--100%, 0, 0); transition-duration: 300ms;"><div class="nut-tabpane active"><div class="nut-cascader-pane"><div class="nut-cascader-item"><div class="nut-cascader-item__title">浙江</div></div><div class="disabled nut-cascader-item"><div class="nut-cascader-item__title">湖南</div></div><div class="nut-cascader-item"><div class="nut-cascader-item__title">福建</div></div></div></div></div></div></div></div></div>"`;
 
 exports[`Address: show exist 1`] = `"<div class="nut-overlay" style="--nutui-overlay-zIndex: 1000;"></div><div style="z-index: 1000;" class="round nut-popup nut-popup-bottom "><div class="nut-popup-title">选择地址</div><div class="nut-popup__close-icon nut-popup__close-icon--top-right"><svg class="nut-icon nut-icon-Close " style="width: 12px; height: 12px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" aria-labelledby="Close" role="presentation"><path d="M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z" fill="currentColor" fill-opacity="0.9"></path></svg></div><div class="nut-address "><ul class="nut-address-exist"><li class="nut-address-exist-item active"><svg class="nut-icon nut-icon-Check " xmlns="http://www.w3.org/2000/svg" color="#FA2C19" viewBox="0 0 1024 1024" aria-labelledby="Check" role="presentation"><path d="M998.4 245.029c-219.429 153.6-398.629 332.8-552.229 552.228-40.228 58.514-128 54.857-164.571-3.657-69.486-106.057-149.943-186.514-256-256-51.2-32.914-18.286-113.371 40.229-98.743C182.857 460.8 274.286 508.343 358.4 585.143c157.257-190.172 358.4-340.114 588.8-435.2 62.171-25.6 106.057 58.514 51.2 95.086" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市次渠镇通州区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location2 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location2" role="presentation"><path d="m530.286 1005.714-25.6-10.971c-36.572-14.629-58.515-25.6-73.143-36.572-102.4-84.114-164.572-135.314-193.829-171.885-43.885-51.2-76.8-91.429-106.057-142.629C95.086 577.83 76.8 504.686 76.8 431.543c0-117.029 43.886-226.743 128-307.2C285.257 43.886 394.971 0 512 0s226.743 43.886 310.857 128c84.114 80.457 128 190.171 128 307.2 0 73.143-18.286 146.286-54.857 212.114-25.6 43.886-58.514 91.429-106.057 142.629-29.257 32.914-87.772 84.114-197.486 171.886 0 0-7.314 7.314-18.286 10.971l-43.885 32.914zM497.37 874.057s3.658 3.657 14.629 7.314c3.657-3.657 7.314-3.657 10.971-7.314C621.714 797.257 683.886 742.4 705.83 716.8c40.228-47.543 69.485-87.771 91.428-128 25.6-47.543 40.229-102.4 40.229-157.257 0-87.772-32.915-168.229-95.086-230.4-58.514-58.514-142.629-91.429-230.4-91.429S340.114 142.63 277.943 204.8c-62.172 62.171-95.086 142.629-95.086 230.4 0 54.857 14.629 109.714 40.229 157.257 25.6 43.886 54.857 80.457 95.085 124.343 25.6 29.257 84.115 80.457 179.2 157.257zm18.286-248.686c-102.4 0-182.857-80.457-182.857-182.857s80.457-182.857 182.857-182.857 182.857 80.457 182.857 182.857-80.457 182.857-182.857 182.857zm0-256c-40.228 0-73.143 32.915-73.143 73.143s32.915 73.143 73.143 73.143 73.143-32.914 73.143-73.143-32.914-73.143-73.143-73.143z" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>钓鱼岛钓鱼岛全区</div></div></li><li class="nut-address-exist-item "><svg class="nut-icon nut-icon-Location2 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Location2" role="presentation"><path d="m530.286 1005.714-25.6-10.971c-36.572-14.629-58.515-25.6-73.143-36.572-102.4-84.114-164.572-135.314-193.829-171.885-43.885-51.2-76.8-91.429-106.057-142.629C95.086 577.83 76.8 504.686 76.8 431.543c0-117.029 43.886-226.743 128-307.2C285.257 43.886 394.971 0 512 0s226.743 43.886 310.857 128c84.114 80.457 128 190.171 128 307.2 0 73.143-18.286 146.286-54.857 212.114-25.6 43.886-58.514 91.429-106.057 142.629-29.257 32.914-87.772 84.114-197.486 171.886 0 0-7.314 7.314-18.286 10.971l-43.885 32.914zM497.37 874.057s3.658 3.657 14.629 7.314c3.657-3.657 7.314-3.657 10.971-7.314C621.714 797.257 683.886 742.4 705.83 716.8c40.228-47.543 69.485-87.771 91.428-128 25.6-47.543 40.229-102.4 40.229-157.257 0-87.772-32.915-168.229-95.086-230.4-58.514-58.514-142.629-91.429-230.4-91.429S340.114 142.63 277.943 204.8c-62.172 62.171-95.086 142.629-95.086 230.4 0 54.857 14.629 109.714 40.229 157.257 25.6 43.886 54.857 80.457 95.085 124.343 25.6 29.257 84.115 80.457 179.2 157.257zm18.286-248.686c-102.4 0-182.857-80.457-182.857-182.857s80.457-182.857 182.857-182.857 182.857 80.457 182.857 182.857-80.457 182.857-182.857 182.857zm0-256c-40.228 0-73.143 32.915-73.143 73.143s32.915 73.143 73.143 73.143 73.143-32.914 73.143-73.143-32.914-73.143-73.143-73.143z" fill="currentColor" fill-opacity="0.9"></path></svg><div class="nut-address-exist-item-info"><div>探探鱼</div><div>182****1718</div><div>北京市大兴区科创十一街18号院京东大厦</div></div></li></ul></div></div>"`;
diff --git a/src/packages/avatarcropper/avatarcropper.taro.tsx b/src/packages/avatarcropper/avatarcropper.taro.tsx
@@ -87,7 +87,7 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
     cropperCanvasContext: Taro.CanvasContext | null
   }
 
-  const cls = classNames(classPrefix, className, 'taro')
+  const cls = classNames(classPrefix, 'taro', className)
   const toolbarPositionCls = classNames(
     `${classPrefix}-popup-toolbar`,
     toolbarPosition

diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx
@@ -59,9 +59,13 @@ export const BackTop: FunctionComponent<
 
   return (
     <div
-      className={classNames(classPrefix, className, {
-        show: backTop,
-      })}
+      className={classNames(
+        classPrefix,
+        {
+          show: backTop,
+        },
+        className
+      )}
       style={styles}
       onClick={(e) => {
         goTop(e)

diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx
@@ -110,16 +110,19 @@ export const BackTop: FunctionComponent<
       }
     )
   }
+
   // 监听事件
   function addEventListener() {
     scrollEl.current?.addEventListener('scroll', scrollListener, false)
     scrollEl.current?.addEventListener('resize', scrollListener, false)
   }
+
   // 移除监听事件
   function removeEventListener() {
     scrollEl.current?.removeEventListener('scroll', scrollListener, false)
     scrollEl.current?.removeEventListener('resize', scrollListener, false)
   }
+
   // 返回顶部点击事件
   const goTop = (e: MouseEvent<HTMLDivElement>) => {
     onClick && onClick(e)
@@ -141,9 +144,13 @@ export const BackTop: FunctionComponent<
 
   return (
     <div
-      className={classNames(classPrefix, className, {
-        show: backTop,
-      })}
+      className={classNames(
+        classPrefix,
+        {
+          show: backTop,
+        },
+        className
+      )}
       style={styles}
       onClick={(e) => {
         goTop(e)

diff --git a/src/packages/barrage/barrage.taro.tsx b/src/packages/barrage/barrage.taro.tsx
@@ -56,9 +56,13 @@ const InternalBarrage: ForwardRefRenderFunction<
   const timeId = useRef(new Date().getTime())
   const timer = useRef(0)
 
-  const classes = classNames(className, classPrefix, {
-    [`${classPrefix}__body${timeId.current}`]: true,
-  })
+  const classes = classNames(
+    classPrefix,
+    {
+      [`${classPrefix}__body${timeId.current}`]: true,
+    },
+    className
+  )
 
   useImperativeHandle(ref, () => ({
     add: (word: string) => {

diff --git a/src/packages/button/__test__/__snapshots__/button.spec.tsx.snap b/src/packages/button/__test__/__snapshots__/button.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`should match snapshot 1`] = `
 <div>
   <button
-    class="nut-button aa nut-button--primary nut-button--normal nut-button--round"
+    class="nut-button nut-button--primary nut-button--normal nut-button--round aa"
     style="margin: 8px;"
     type="button"
   >

diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
@@ -108,7 +108,6 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         ref={ref}
         className={classNames(
           prefixCls,
-          className,
           props.type ? `${prefixCls}--${type}` : null,
           props.fill ? `${prefixCls}--${fill}` : null,
           {
@@ -117,7 +116,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
             [`${prefixCls}--block`]: block,
             [`${prefixCls}--disabled`]: disabled,
             [`${prefixCls}--loading`]: loading,
-          }
+          },
+          className
         )}
         style={{ ...getStyle(), ...style }}
         onClick={(e) => handleClick(e)}

diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
@@ -98,7 +98,6 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         type={nativeType}
         className={classNames(
           prefixCls,
-          className,
           props.type ? `${prefixCls}--${type}` : null,
           props.fill ? `${prefixCls}--${fill}` : null,
           {
@@ -107,7 +106,8 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
             [`${prefixCls}--block`]: block,
             [`${prefixCls}--disabled`]: disabled,
             [`${prefixCls}--loading`]: loading,
-          }
+          },
+          className
         )}
         style={{ ...getStyle(), ...style }}
         onClick={(e) => handleClick(e)}

diff --git a/src/packages/calendaritem/calendaritem.taro.tsx b/src/packages/calendaritem/calendaritem.taro.tsx
@@ -712,8 +712,8 @@ export const CalendarItem = React.forwardRef<
       [`${classPrefix}-title`]: !popup,
       [`${classPrefix}-nofooter`]: !!autoBackfill,
     },
-    className,
-    classPrefix
+    classPrefix,
+    className
   )
 
   const headerClasses = classNames({

diff --git a/src/packages/calendaritem/calendaritem.tsx b/src/packages/calendaritem/calendaritem.tsx
@@ -712,8 +712,8 @@ export const CalendarItem = React.forwardRef<
       [`${classPrefix}-title`]: !popup,
       [`${classPrefix}-nofooter`]: !!autoBackfill,
     },
-    className,
-    classPrefix
+    classPrefix,
+    className
   )
 
   const headerClasses = classNames({

diff --git a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap
@@ -68,7 +68,7 @@ exports[`description slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price nut-cardright-price-origin "
+          class="nut-price  nut-cardright-price-origin"
         >
           <div
             class="nut-price__symbol nut-price__symbol-normal"
@@ -177,7 +177,7 @@ exports[`extra slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price nut-cardright-price-origin "
+          class="nut-price  nut-cardright-price-origin"
         >
           <div
             class="nut-price__symbol nut-price__symbol-normal"
@@ -380,7 +380,7 @@ exports[`props test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price nut-cardright-price-origin "
+          class="nut-price  nut-cardright-price-origin"
         >
           <div
             class="nut-price__symbol nut-price__symbol-normal"
@@ -489,7 +489,7 @@ exports[`tag slot test 1`] = `
           </div>
         </div>
         <div
-          class="nut-price nut-cardright-price-origin "
+          class="nut-price  nut-cardright-price-origin"
         >
           <div
             class="nut-price__symbol nut-price__symbol-normal"

diff --git a/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap b/src/packages/cascader/__tests__/__snapshots__/cascader.spec.tsx.snap
@@ -41,7 +41,7 @@ exports[`Cascader change tab 1`] = `
             style="transform: translate3d(--100%, 0, 0); transition-duration: 300ms;"
           >
             <div
-              class="active nut-tabpane"
+              class="nut-tabpane active"
             >
               <div
                 class="nut-cascader-pane"
@@ -124,7 +124,7 @@ exports[`Cascader change tab 2`] = `
             style="transform: translate3d(--100%, 0, 0); transition-duration: 300ms;"
           >
             <div
-              class="active nut-tabpane"
+              class="nut-tabpane active"
             >
               <div
                 class="nut-cascader-pane"
@@ -317,7 +317,7 @@ exports[`Cascader visible true 1`] = `
               </div>
             </div>
             <div
-              class="active nut-tabpane"
+              class="nut-tabpane active"
             >
               <div
                 class="nut-cascader-pane"

diff --git a/src/packages/checkbox/checkbox.taro.tsx b/src/packages/checkbox/checkbox.taro.tsx
@@ -152,9 +152,13 @@ export const Checkbox: FunctionComponent<
 
   return (
     <div
-      className={classNames(classPrefix, className, {
-        [`${classPrefix}--reverse`]: labelPosition === 'left',
-      })}
+      className={classNames(
+        classPrefix,
+        {
+          [`${classPrefix}--reverse`]: labelPosition === 'left',
+        },
+        className
+      )}
       {...rest}
       onClick={handleClick}
     >

diff --git a/src/packages/checkbox/checkbox.tsx b/src/packages/checkbox/checkbox.tsx
@@ -152,9 +152,13 @@ export const Checkbox: FunctionComponent<
 
   return (
     <div
-      className={classNames(classPrefix, className, {
-        [`${classPrefix}--reverse`]: labelPosition === 'left',
-      })}
+      className={classNames(
+        classPrefix,
+        {
+          [`${classPrefix}--reverse`]: labelPosition === 'left',
+        },
+        className
+      )}
       {...rest}
       onClick={handleClick}
     >

diff --git a/src/packages/checkboxgroup/checkboxgroup.taro.tsx b/src/packages/checkboxgroup/checkboxgroup.taro.tsx
@@ -113,9 +113,13 @@ export const CheckboxGroup = React.forwardRef(
         }}
       >
         <div
-          className={classNames(classPrefix, className, {
-            [`nut-checkboxgroup--${props.direction}`]: props.direction,
-          })}
+          className={classNames(
+            classPrefix,
+            {
+              [`nut-checkboxgroup--${props.direction}`]: props.direction,
+            },
+            className
+          )}
           {...rest}
         >
           {options?.length ? renderOptions() : children}

diff --git a/src/packages/checkboxgroup/checkboxgroup.tsx b/src/packages/checkboxgroup/checkboxgroup.tsx
@@ -113,9 +113,13 @@ export const CheckboxGroup = React.forwardRef(
         }}
       >
         <div
-          className={classNames(classPrefix, className, {
-            [`nut-checkboxgroup--${props.direction}`]: props.direction,
-          })}
+          className={classNames(
+            classPrefix,
+            {
+              [`nut-checkboxgroup--${props.direction}`]: props.direction,
+            },
+            className
+          )}
           {...rest}
         >
           {options?.length ? renderOptions() : children}

diff --git a/src/packages/circleprogress/circleprogress.taro.tsx b/src/packages/circleprogress/circleprogress.taro.tsx
@@ -52,7 +52,7 @@ export const CircleProgress: FunctionComponent<
   const oldValue = useRef(percent)
   const forceUpdate = useForceUpdate()
 
-  const classes = classNames(className, classPrefix)
+  const classes = classNames(classPrefix, className)
   const refRandomId = Math.random().toString(36).slice(-8)
   const animateIdRef = useRef(0)
 

diff --git a/src/packages/circleprogress/circleprogress.tsx b/src/packages/circleprogress/circleprogress.tsx
@@ -47,7 +47,7 @@ export const CircleProgress: FunctionComponent<
     ...props,
   }
 
-  const classes = classNames(className, classPrefix)
+  const classes = classNames(classPrefix, className)
   const refRandomId = Math.random().toString(36).slice(-8)
 
   const styles: React.CSSProperties = {

diff --git a/src/packages/ellipsis/ellipsis.taro.tsx b/src/packages/ellipsis/ellipsis.taro.tsx
@@ -81,8 +81,8 @@ export const Ellipsis: FunctionComponent<
 
   const classes = classNames(
     classPrefix,
-    className,
-    width ? `${classPrefix}-width` : ''
+    width ? `${classPrefix}-width` : '',
+    className
   )
 
   const init = () => {

diff --git a/src/packages/fixednav/fixednav.taro.tsx b/src/packages/fixednav/fixednav.taro.tsx
@@ -66,12 +66,12 @@ export const FixedNav: FunctionComponent<
   const classPrefix = 'nut-fixednav'
 
   const classes = classNames(
+    classPrefix,
     {
       active: visible,
     },
     type,
-    className,
-    classPrefix
+    className
   )
 
   const handleClick = (item: any, event: MouseEvent): void => {