如何为React中rc-input-number组件的内部input元素设置样式？

当然可以修改内部的input元素样式，以下是几种常用方案：

• 通过全局CSS选择器直接定位
  利用组件自带的类名嵌套，直接在CSS文件中编写样式：

  .rc-input-number .rc-input-number-input {
    border: 1px solid #ff4d4f;
    padding: 6px 10px;
    font-size: 14px;
  }
  

• 通过组件API传递inputProps（推荐）
  rc-input-number提供了inputProps属性，可直接给内部input元素传递样式或其他属性：

  import InputNumber from 'rc-input-number';
  
  function App() {
    return (
      <InputNumber
        inputProps={{
          style: {
            borderColor: '#1890ff',
            backgroundColor: '#f0f8ff'
          }
        }}
      />
    );
  }
  

• CSS Modules环境下的写法
  如果项目使用CSS Modules，需要用:global关键字来访问全局类名：

  .customInputNumber :global(.rc-input-number-input) {
    color: #52c41a;
    border-radius: 4px;
  }
  

  然后给InputNumber组件添加自定义类名：

  <InputNumber className="customInputNumber" />
  

• CSS-in-JS方案（如styled-components）
  用styled-components包裹组件后，直接在样式中定位内部input：

  import styled from 'styled-components';
  import InputNumber from 'rc-input-number';
  
  const StyledInputNumber = styled(InputNumber)`
    .rc-input-number-input {
      font-weight: bold;
      border: 2px solid #722ed1;
    }
  `;
  
  // 使用时
  <StyledInputNumber />
  

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