在 React 中设置输入 type=Number 的样式

Question

我有一个 input type=Number 字段，我在 React 项目中使用它。我使用了非常简单的样式，因为我是样式/CSS 的新手和初学者，所以我无法让它看起来像这样：

现在的样子：

我想要使用样式化组件/任何基于 React 的方法的上述输入字段。我使用的是纯 HTML，但它看起来不像我想要的。帮助表示赞赏。提前致谢！

以下是我迄今为止尝试过的： Main.tsx：

<input  value="1" type="number" min="1" max="10" />

CSS：index.scss

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}

我想尝试使用 Styled-Component 的方法，但想不出任何方法。请指导我这样做。