React中styled-components实现number输入框值垂直显示（禁用transform）

嘿，我来帮你搞定这个问题！首先得先修正你styled-components代码里的几个语法小问题——这些小错误可能会导致部分样式不生效：

修正后的组件代码 #

export const UnitValue = styled.input`
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  font-weight: bold;
  text-align: center;
  margin-right: ${props => props.marginRight};
  margin-top: ${props => props.marginTop};
  margin-left: ${props => props.marginLeft};
  width: ${props => props.width};
  height: ${props => props.height};
  border: ${props => props.border};
  background-color: ${props => props.color};
`;

主要修正了这些点：

• 去掉了箭头函数里多余的大括号（比如${props => {props.marginRight};改成${props => props.marginRight};）
• 给每个属性末尾补上了分号，避免样式解析出错

实现垂直文本对齐（无需transform） #

要让输入框的文本和旁边垂直排列的文本方向一致，你可以用CSS原生的writing-mode属性——这是专门控制文本书写方向的属性，完全不需要用到transform。

根据你旁边文本的垂直方向，调整以下样式：

export const UnitValue = styled.input`
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  font-weight: bold;
  text-align: center;
  margin-right: ${props => props.marginRight};
  margin-top: ${props => props.marginTop};
  margin-left: ${props => props.marginLeft};
  /* 垂直布局时，宽高要互换，因为writing-mode会改变元素的流向 */
  width: ${props => props.height};
  height: ${props => props.width};
  border: ${props => props.border};
  background-color: ${props => props.color};
  
  /* 核心样式：设置垂直文本 */
  writing-mode: vertical-rl; /* 文本垂直排列，从右向左流动，适配多数垂直文本场景 */
  text-orientation: upright; /* 让数字保持正立，不会旋转90度，和旁边文本方向匹配 */
`;

属性说明：

• writing-mode: vertical-rl：改变文本的流动方向为垂直，从右到左排列，这时候输入框的宽高逻辑会反转，所以需要把width和height的取值互换，保证输入框的形状符合垂直布局。
• text-orientation: upright：确保输入的数字是正立显示的，不会因为垂直布局而旋转，完美匹配旁边的垂直文本样式。

如果你的垂直文本是从上到下、从左到右的，可以把writing-mode改成vertical-lr即可。

这个方案兼容性很好，现代浏览器（Chrome、Firefox、Safari、Edge）都支持，完全符合你“不能用transform”的要求。

内容的提问来源于stack exchange，提问作者Elias Ramirez