样式化输入字段：在里面添加自定义按钮答案

【问题标题】：Styling an input field: adding custom buttons inside样式化输入字段：在里面添加自定义按钮
【发布时间】：2021-08-25 07:34:27
【问题描述】：

我有一个看起来像这样的输入：

到目前为止，我已经使用了这段代码，使用 Styled-Components 和 Font-Awesome 图标来复制它：

<Thing>
 1 <i className="fa fa-chevron-up" aria-hidden="true"></i><i className="fa fa-chevron-down" aria-hidden="true"></i>
</Thing>

const Thing = styled.div`
    border: 1px solid; 
    width: 50px;
    padding: 1.5px;
    padding-left: 7px;
`

这就是我得到的：

不确定这是否是设置样式的正确方法，因为它似乎已溢出。

【问题讨论】：

标签： reactjs typescript font-awesome styled-components

【解决方案1】：

将数字包裹在任何标签中，并赋予其 100% 的高度

其他方法是提供<Thing> flexbox 并将字体很棒的图标包装在flex-direction: column 布局中。

【讨论】：

试过这个，按钮并排而不是顶部
@SharathKamlekar 这就是为什么你需要 flex 方向列

【解决方案2】：

（不完全回答您问题的匹配标签。）

您是否考虑过改用native HTML number input？

&lt;input type="number" size="2" value="1"&gt;

显示在某种程度上是特定于设备的，但您无需在 React 中重新发明它即可获得语义和可访问的数值控制。

【讨论】：

是的，默认是这样的。我想改变它以获得额外的控制和外观。

【解决方案3】：

我认为这可以帮助你

<Thing>
  <FirstChild>1</FirstChild>
  <SecondChild>
    <i className="fa fa-chevron-up" aria-hidden="true"></i>
    <i className="fa fa- chevron-down" aria-hidden="true"></i>
  </SecondChild> 
</Thing>

const Thing = styled.div`
    display: flex;
    align-items: center;
    border: 1px solid; 
    padding: 1.5px;
`
const FirstChild= styled.div`
    min-width: 20px;
`
const SecondChild= styled.div`
    display: flex;
    flex-direction: column; 
    align-items: center;
    padding-left: 7px;
`

【讨论】：