fix(button): 样式变量无法生效问题修复

src/packages/button/button.scss

@@ -101,22 +101,6 @@
 
   &-round {
     border-radius: $button-border-radius;
-
-    &-xlarge {
-      border-radius: $button-xlarge-border-radius;
-    }
-
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
   }
 
   &-default {
@@ -155,7 +139,7 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    border-radius: $radius-base;
+    border-radius: $button-xlarge-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -178,7 +162,7 @@
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    border-radius: $radius-s;
+    border-radius: $button-large-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -202,7 +186,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-small-border-radius;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -219,7 +203,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-mini-border-radius;
 
     .nut-icon {
       font-size: $button-mini-font-size;

src/packages/button/demo.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '@/sites/assets/locale'
-import Cell from '../cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -54,41 +53,23 @@ const ButtonDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.ce5c5446}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.e51e4582}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated['0aaad622']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated['7db1a8b2']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.ce5c5447}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.a52bef0c}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
         <h2>{translated['0aaad620']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo7 />
-        </Cell>
+        <Demo7 />
         <h2>{translated.c9e6df49}</h2>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        <Demo8 />
         <h2>{translated.customColor}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo9 />
-        </Cell>
+        <Demo9 />
       </div>
     </>
   )

src/packages/button/demos/h5/demo1.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>
         Primary
       </Button>
@@ -23,7 +23,7 @@ const Demo1 = () => {
       <Button type="success" style={marginStyle}>
         Success
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo1

src/packages/button/demos/h5/demo2.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" fill="solid" style={marginStyle}>
         Solid
       </Button>
@@ -17,7 +17,7 @@ const Demo2 = () => {
       <Button fill="none" style={marginStyle}>
         None
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo2

src/packages/button/demos/h5/demo3.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Star, Plus } from '@nutui/icons-react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         type="primary"
         icon={<Star />}
@@ -115,7 +115,7 @@ const Demo3 = () => {
       >
         Button
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo3

src/packages/button/demos/h5/demo4.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { Star, Plus } from '@nutui/icons-react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         disabled
         type="primary"
@@ -111,7 +111,7 @@ const Demo4 = () => {
       >
         Disabled
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo4

src/packages/button/demos/h5/demo5.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button style={marginStyle} type="primary" shape="square">
         Square Button
       </Button>
       <Button style={marginStyle} type="primary">
         Round Button
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo5

src/packages/button/demos/h5/demo6.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button loading type="warning" style={marginStyle}>
         Loading
       </Button>
@@ -22,7 +22,7 @@ const Demo6 = () => {
       >
         Click Me!
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo6

src/packages/button/demos/h5/demo7.tsx

@@ -1,27 +1,26 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const App = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
-      <Button type="primary" style={marginStyle}>
-        Normal
+    <Cell style={{ flexWrap: 'wrap' }}>
+      <Button size="mini" style={marginStyle} type="primary">
+        Mini
       </Button>
-      <Button style={marginStyle}>Normal</Button>
       <Button size="small" style={marginStyle} type="primary">
         Small
       </Button>
-      <Button size="mini" style={marginStyle} type="primary">
-        Mini
+      <Button type="primary" style={marginStyle}>
+        Normal
       </Button>
       <Button size="large" type="primary" style={marginStyle}>
         Large
       </Button>
       <Button size="xlarge" type="primary" style={marginStyle}>
         XLarge
       </Button>
-    </>
+    </Cell>
   )
 }
 export default App

src/packages/button/demos/h5/demo8.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo8 = () => {
   return (
-    <Button block type="primary">
-      Block Button
-    </Button>
+    <Cell style={{ flexWrap: 'wrap' }}>
+      <Button block type="primary">
+        Block Button
+      </Button>
+    </Cell>
   )
 }
 export default Demo8

src/packages/button/demos/h5/demo9.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const App = () => {
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         color="blue"
         style={{
@@ -38,7 +38,7 @@ const App = () => {
       >
         渐变按钮
       </Button>
-    </>
+    </Cell>
   )
 }
 export default App

src/packages/button/demos/taro/demo8.tsx

@@ -10,15 +10,14 @@ const Demo8 = () => {
 
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
-      <Button type="primary" style={marginStyle}>
-        Normal
+      <Button size="mini" style={marginStyle} type="primary">
+        Mini
       </Button>
-      <Button style={marginStyle}>Normal</Button>
       <Button size="small" style={marginStyle} type="primary">
         Small
       </Button>
-      <Button size="mini" style={marginStyle} type="primary">
-        Mini
+      <Button type="primary" style={marginStyle}>
+        Normal
       </Button>
       <Button size="large" type="primary" style={marginStyle}>
         Large

src/packages/button/doc.en-US.md

@@ -125,7 +125,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-button-border-radius | Button rounded corner settings | `8px` |
+| \--nutui-button-border-radius | Button rounded corner settings | `$button-border-radius` |
 | \--nutui-button-border-width | The border width of the button | `1px` |
 | \--nutui-button-normal-padding | padding value when size normal | `0px 12px` |
 | \--nutui-button-default-height | The height of the button with type default | `32px` |
@@ -138,15 +138,15 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
 | \--nutui-button-large-height | The height of the button with size large | `40px` |
 | \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
-| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |
+| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `$button-large-border-radius` |
 | \--nutui-button-small-padding | Padding for buttons of size small | `0 8px` |
 | \--nutui-button-small-height | The height of the button with size small | `28px` |
 | \--nutui-button-small-font-size | The font size of the button with size small | `$font-size-s` |
-| \--nutui-button-small-border-radius | Rounded corners for buttons with size small | `8px` |
+| \--nutui-button-small-border-radius | Rounded corners for buttons with size small | `$button-small-border-radius` |
 | \--nutui-button-mini-padding | Padding for buttons with size mini | `0 8px` |
 | \--nutui-button-mini-height | size is the height of the mini button | `24px` |
 | \--nutui-button-mini-font-size | The font size of the button with size mini | `$font-size-xs` |
-| \--nutui-button-mini-border-radius | The rounded corners of the button with size mini | `6px` |
+| \--nutui-button-mini-border-radius | The rounded corners of the button with size mini | `$button-mini-border-radius` |
 | \--nutui-button-text-icon-margin | Margin of text with icon button | `4px` |
 
 <Contribution name="Button" />