diff --git a/example/App.vue b/example/App.vue
index f50bde8..33002c8 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -17,7 +17,8 @@
   <h2>Input</h2>
   <div class="show-item">
     <emqx-input v-model="testInput" placeholder="test" style="margin-bottom: 20px"></emqx-input>
-    <emqx-input v-model="testInput" placeholder="test" type="textarea"></emqx-input>
+    <emqx-input v-model="testInput" placeholder="test" type="textarea" style="margin-bottom: 20px"></emqx-input>
+    <emqx-input-number v-model="testInputNumber" :max="5"></emqx-input-number>
   </div>
   <h2>Layout</h2>
   <div class="show-item">
@@ -220,6 +221,7 @@ export default defineComponent({
   name: 'App',
   setup() {
     const testInput = ref('')
+    const testInputNumber = ref(0)
     const testSelect = ref('')
     const testSwitch = ref(true)
     const dialogVisible = ref(false)
@@ -313,6 +315,7 @@ export default defineComponent({
     const radio = ref('1')
     return {
       testInput,
+      testInputNumber,
       testSelect,
       testOptions,
       testSwitch,
diff --git a/packages/InputNumber/src/input-number.vue b/packages/InputNumber/src/input-number.vue
index 7d01cf8..c3f10f3 100644
--- a/packages/InputNumber/src/input-number.vue
+++ b/packages/InputNumber/src/input-number.vue
@@ -11,32 +11,3 @@ export default defineComponent({
   components: { ElInputNumber },
 })
 </script>
-
-<style lang="scss">
-.emqx-input-number {
-  $border-radius: 8px;
-  &.el-input-number {
-    width: 100%;
-    .el-input__inner {
-      text-align: left;
-    }
-    &.is-controls-right {
-      .el-input-number__increase {
-        border-radius: 0 $border-radius 0 0;
-      }
-      .el-input-number__decrease {
-        border-radius: 0 0 $border-radius 0;
-      }
-    }
-  }
-  .el-input__inner {
-    border-radius: $border-radius;
-  }
-  .el-input-number__decrease {
-    border-radius: $border-radius 0 0 $border-radius;
-  }
-  .el-input-number__increase {
-    border-radius: 0 $border-radius $border-radius 0;
-  }
-}
-</style>
diff --git a/packages/styles/components/index.scss b/packages/styles/components/index.scss
index 8a9a859..68d4437 100644
--- a/packages/styles/components/index.scss
+++ b/packages/styles/components/index.scss
@@ -9,6 +9,7 @@
 @import "card.scss";
 @import "header.scss";
 @import "input.scss";
+@import "input-number.scss";
 @import "menu-item.scss";
 @import "select.scss";
 @import "tags.scss";
diff --git a/packages/styles/components/input-number.scss b/packages/styles/components/input-number.scss
new file mode 100644
index 0000000..e9c4f39
--- /dev/null
+++ b/packages/styles/components/input-number.scss
@@ -0,0 +1,25 @@
+.emqx-input-number {
+  &.el-input-number {
+    width: 100%;
+    .el-input__inner {
+      text-align: left;
+    }
+    &.is-controls-right {
+      .el-input-number__increase {
+        border-radius: 0 8px 0 0;
+      }
+      .el-input-number__decrease {
+        border-radius: 0 0 8px 0;
+      }
+    }
+  }
+  .el-input__inner {
+    border-radius: 8px;
+  }
+  .el-input-number__decrease {
+    border-radius: 8px 0 0 8px;
+  }
+  .el-input-number__increase {
+    border-radius: 0 8px 8px 0;
+  }
+}