@nutui/nutui-react 4.0.0-beta.6 → 4.0.0-beta.7

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# v4.0.0-beta.7
+
+`2026-08-31`
+
+- :sparkles: Feat v16 noticebar simple (#3491)
+- :bug: fix(deps): update all non-major dependencies (#3503)
+- 🪵 refactor(popover): v16适配 (#3492)
+
 # v4.0.0-beta.6
 
 `2026-08-10`

package/dist/cjs/packages/animate/style/style.css

@@ -10,21 +10,15 @@ page {
 
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -77,6 +71,9 @@ page {
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -112,6 +109,9 @@ page {
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -123,6 +123,9 @@ page {
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -137,6 +140,9 @@ page {
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -170,6 +176,9 @@ page {
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -195,6 +204,9 @@ page {
     transform: translateX(calc(150px * var(--nut-scale-f, 1))) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -216,6 +228,9 @@ page {
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -237,6 +252,9 @@ page {
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/cjs/packages/animate/style-jmapp/style.css

@@ -4,21 +4,15 @@
 /* #endif */
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -71,6 +65,9 @@
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -106,6 +103,9 @@
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -117,6 +117,9 @@
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -131,6 +134,9 @@
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -164,6 +170,9 @@
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -189,6 +198,9 @@
     transform: translateX(scale-px(150px)) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -210,6 +222,9 @@
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -231,6 +246,9 @@
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/cjs/packages/animate/style-jrkf/style.css

@@ -4,21 +4,15 @@
 /* #endif */
 .nut-animate {
   /* Animation CSS */
-  /* Slide Animations */
-  /* Shake Animation */
-  /* Ripple Animation */
-  /* Breath Animation */
-  /* Twinkle Animation */
-  /* Flicker Animation */
-  /* Jump Animation */
-  /* Float Animation */
-  /* Loop Animation */
 }
 .nut-animate [class*=nut-animate-] {
   animation-duration: 0.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: both;
 }
+.nut-animate {
+  /* Slide Animations */
+}
 @keyframes slide-right {
   0% {
     opacity: 0;
@@ -71,6 +65,9 @@
 .nut-animate .nut-animate-slide-bottom {
   animation-name: slide-bottom;
 }
+.nut-animate {
+  /* Shake Animation */
+}
 @keyframes shake {
   0%, 100% {
     transform: translateX(0);
@@ -106,6 +103,9 @@
 .nut-animate .nut-animate-shake {
   animation-name: shake;
 }
+.nut-animate {
+  /* Ripple Animation */
+}
 @keyframes ripple {
   0% {
     transform: scale(1);
@@ -117,6 +117,9 @@
 .nut-animate .nut-animate-ripple {
   animation-name: ripple;
 }
+.nut-animate {
+  /* Breath Animation */
+}
 @keyframes breath {
   0%, 100% {
     transform: scale(1);
@@ -131,6 +134,9 @@
   animation-timing-function: ease-in-out;
   animation-direction: alternate;
 }
+.nut-animate {
+  /* Twinkle Animation */
+}
 .nut-animate .nut-animate-twinkle {
   position: relative;
 }
@@ -164,6 +170,9 @@
     opacity: 0;
   }
 }
+.nut-animate {
+  /* Flicker Animation */
+}
 .nut-animate .nut-animate-flicker {
   position: relative;
   overflow: hidden;
@@ -189,6 +198,9 @@
     transform: translateX(scale-px(150px)) skewX(-20deg);
   }
 }
+.nut-animate {
+  /* Jump Animation */
+}
 @keyframes jump {
   0% {
     transform: rotate(0) translateY(0);
@@ -210,6 +222,9 @@
   transform-origin: center center;
   animation: jump 0.7s linear;
 }
+.nut-animate {
+  /* Float Animation */
+}
 @keyframes float-pop {
   0% {
     top: 0;
@@ -231,6 +246,9 @@
   position: relative;
   animation-name: float-pop;
 }
+.nut-animate {
+  /* Loop Animation */
+}
 .nut-animate .loop {
   animation-iteration-count: infinite;
 }

package/dist/cjs/packages/audio/audio.js

@@ -36,14 +36,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     onCanPlay: function onCanPlay(e) {}
 });
 var Audio = function Audio(props) {
-    var watch = function watch() {
-        if (AudioRef && AudioRef.current) {
-            var current = AudioRef.current;
-            current.addEventListener('play', function() {
-                setPlaying(true);
-            });
-        }
-    };
     var locale = (0, _configprovider.useConfig)().locale;
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, src = _$_object_spread.src, style = _$_object_spread.style, muted = _$_object_spread.muted, autoPlay = _$_object_spread.autoPlay, loop = _$_object_spread.loop, preload = _$_object_spread.preload, type = _$_object_spread.type, onBack = _$_object_spread.onBack, onForward = _$_object_spread.onForward, onPause = _$_object_spread.onPause, onEnd = _$_object_spread.onEnd, onMute = _$_object_spread.onMute, onCanPlay = _$_object_spread.onCanPlay, children = _$_object_spread.children, rest = (0, _object_without_properties._)(_$_object_spread, [
         "className",
@@ -85,6 +77,14 @@ var Audio = function Audio(props) {
             onEnd === null || onEnd === void 0 ? void 0 : onEnd(e);
         }
     };
+    function watch() {
+        if (AudioRef && AudioRef.current) {
+            var current = AudioRef.current;
+            current.addEventListener('play', function() {
+                setPlaying(true);
+            });
+        }
+    }
     (0, _react.useEffect)(function() {
         watch();
     }, []);

package/dist/cjs/packages/badge/badge.js

@@ -28,15 +28,6 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     disabled: false
 });
 var Badge = function Badge(props) {
-    var isIcon = function isIcon() {
-        if ((typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' && value) return value;
-    };
-    var isNumber = function isNumber() {
-        if (typeof value === 'number' && value) return value;
-    };
-    var isString = function isString() {
-        if (typeof value === 'string' && value) return value;
-    };
     var _this;
     var rtl = (0, _configprovider.useRtl)();
     var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, value = _$_object_spread.value, max = _$_object_spread.max, children = _$_object_spread.children, dot = _$_object_spread.dot, top = _$_object_spread.top, right = _$_object_spread.right, fill = _$_object_spread.fill, size = _$_object_spread.size, disabled = _$_object_spread.disabled;
@@ -49,6 +40,15 @@ var Badge = function Badge(props) {
         }
         return value;
     };
+    function isIcon() {
+        if ((typeof value === "undefined" ? "undefined" : (0, _type_of._)(value)) === 'object' && value) return value;
+    }
+    function isNumber() {
+        if (typeof value === 'number' && value) return value;
+    }
+    function isString() {
+        if (typeof value === 'string' && value) return value;
+    }
     var _obj;
     var contentClasses = (0, _classnames.default)((_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-sup"), isNumber() || isString() || dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-number"), isNumber()), (0, _define_property._)(_obj, "".concat(classPrefix, "-one"), typeof getContent() === 'string' && ((_this = "".concat(getContent())) === null || _this === void 0 ? void 0 : _this.length) === 1), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot"), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-dot-").concat(size), dot), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(fill), fill === 'outline'), (0, _define_property._)(_obj, "".concat(classPrefix, "-content"), children), (0, _define_property._)(_obj, "".concat(classPrefix, "-disabled"), disabled), _obj));
     var getPositionStyle = function getPositionStyle() {

package/dist/cjs/packages/button/style/style.css

@@ -162,7 +162,6 @@ page {
   padding: var(--nutui-button-xlarge-padding, 0px calc(20px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -178,12 +177,14 @@ page {
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, calc(18px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, calc(44px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-44-padding, 0px calc(16px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -199,12 +200,14 @@ page {
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold, 600);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, calc(40px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-large-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(84px * var(--nut-scale-f, 1));
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -220,12 +223,14 @@ page {
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, calc(15px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-large {
+  min-width: calc(84px * var(--nut-scale-f, 1));
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, calc(36px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-36-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base, calc(8px * var(--nut-scale-f, 1))));
-  min-width: calc(66px * var(--nut-scale-f, 1));
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, calc(6px * var(--nut-scale-f, 1)));
@@ -241,13 +246,14 @@ page {
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: calc(66px * var(--nut-scale-f, 1));
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, calc(28px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-small-padding, 0px calc(8px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, calc(6px * var(--nut-scale-f, 1))));
-  min-width: calc(52px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -257,13 +263,15 @@ page {
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-small {
+  min-width: calc(52px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, calc(24px * var(--nut-scale-f, 1)));
   padding: var(--nutui-button-mini-padding, 0px calc(6px * var(--nut-scale-f, 1)));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, calc(4px * var(--nut-scale-f, 1))));
-  min-width: calc(48px * var(--nut-scale-f, 1));
-  font-weight: var(--nutui-font-weight, 400);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
@@ -273,6 +281,10 @@ page {
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
+.nut-button-mini {
+  min-width: calc(48px * var(--nut-scale-f, 1));
+  font-weight: var(--nutui-font-weight, 400);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));

package/dist/cjs/packages/button/style-jmapp/style.css

@@ -156,7 +156,6 @@
   padding: var(--nutui-button-xlarge-padding, 0px 32px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -172,12 +171,14 @@
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, 44px);
   padding: var(--nutui-button-44-padding, 0px 16px);
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -193,12 +194,14 @@
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, 44px);
   padding: var(--nutui-button-large-padding, 0px var(--nutui-spacing-xxl));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-s));
-  min-width: scale-px(84px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -214,12 +217,14 @@
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
 }
+.nut-button-large {
+  min-width: scale-px(84px);
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, 36px);
   padding: var(--nutui-button-36-padding, 0px 12px);
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base));
-  min-width: scale-px(66px);
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -235,13 +240,14 @@
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: scale-px(66px);
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(52px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
@@ -251,13 +257,15 @@
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
 }
+.nut-button-small {
+  min-width: scale-px(52px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(48px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
@@ -267,6 +275,10 @@
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
 }
+.nut-button-mini {
+  min-width: scale-px(48px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-text-dark));
   background: var(--nutui-color-primary);

package/dist/cjs/packages/button/style-jrkf/style.css

@@ -156,7 +156,6 @@
   padding: var(--nutui-button-xlarge-padding, 0px 32px);
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
   border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-xlarge .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -172,12 +171,14 @@
 .nut-button-xlarge-children {
   font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-h2));
 }
+.nut-button-xlarge {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-44 {
   height: var(--nutui-button-44-height, 44px);
   padding: var(--nutui-button-44-padding, 0px 16px);
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
   border-radius: var(--nutui-button-44-border-radius, var(--nutui-radius-base));
-  font-weight: var(--nutui-font-weight-bold);
 }
 .nut-button-44 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -193,12 +194,14 @@
 .nut-button-44-children {
   font-size: var(--nutui-button-44-font-size, var(--nutui-font-size-15));
 }
+.nut-button-44 {
+  font-weight: var(--nutui-font-weight-bold);
+}
 .nut-button-large {
   height: var(--nutui-button-large-height, 44px);
   padding: var(--nutui-button-large-padding, 0px var(--nutui-spacing-xxl));
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
   border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-s));
-  min-width: scale-px(84px);
 }
 .nut-button-large .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -214,12 +217,14 @@
 .nut-button-large-children {
   font-size: var(--nutui-button-large-font-size, var(--nutui-font-text-large));
 }
+.nut-button-large {
+  min-width: scale-px(84px);
+}
 .nut-button-36 {
   height: var(--nutui-button-36-height, 36px);
   padding: var(--nutui-button-36-padding, 0px 12px);
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
   border-radius: var(--nutui-button-36-border-radius, var(--nutui-radius-base));
-  min-width: scale-px(66px);
 }
 .nut-button-36 .nut-button-text {
   margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
@@ -235,13 +240,14 @@
 .nut-button-36-children {
   font-size: var(--nutui-button-36-font-size, var(--nutui-font-size-14));
 }
+.nut-button-36 {
+  min-width: scale-px(66px);
+}
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
   border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(52px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
@@ -251,13 +257,15 @@
 .nut-button-small-children {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-text));
 }
+.nut-button-small {
+  min-width: scale-px(52px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px var(--nutui-spacing-l));
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
   border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs));
-  min-width: scale-px(48px);
-  font-weight: var(--nutui-font-weight);
 }
 .nut-button-mini .nut-icon {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
@@ -267,6 +275,10 @@
 .nut-button-mini-children {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-text-small));
 }
+.nut-button-mini {
+  min-width: scale-px(48px);
+  font-weight: var(--nutui-font-weight);
+}
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-text-dark));
   background: var(--nutui-color-primary, #ff6666);