请教：如何为react-intl-tel-input输入框设置样式？

下面是几种亲测有效的样式定制方案，根据你的项目场景选择即可：

1. 直接用全局CSS覆盖组件默认样式 #

这个组件渲染后会生成固定的CSS类名，直接通过这些类名编写样式就能覆盖默认风格：

/* 组件整体容器样式 */
.intl-tel-input {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
}

/* 输入框本身的样式 */
.intl-tel-input .form-control {
  padding: 10px 45px 10px 15px;
  font-size: 14px;
  border: none;
  box-shadow: none;
}

/* 国家选择按钮的样式 */
.intl-tel-input .selected-flag {
  padding: 0 12px;
  background-color: #f5f5f5;
  border-right: 1px solid #e0e0e0;
}

/* 下拉选择面板的样式 */
.intl-tel-input .country-list {
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

如果遇到样式不生效的情况，可给选择器加上父容器类提升优先级（比如 .your-form-container .intl-tel-input .form-control），或者临时用 !important 排查是否为优先级问题。

2. 通过组件props传递样式 #

部分版本的react-intl-tel-input支持通过 inputProps 给内部输入框直接传递样式，或用 containerStyle 设置容器样式：

import IntlTelInput from 'react-intl-tel-input';

// 示例：传递内联样式
<IntlTelInput
  inputProps={{
    style: {
      borderRadius: '4px',
      padding: '8px',
      borderColor: '#ccc'
    }
  }}
  containerStyle={{
    width: '100%'
  }}
/>

如果需要传递自定义类名，也可以在 inputProps 里添加 className 属性：

inputProps={{
  className: 'custom-input-class'
}}

3. 适配CSS Modules或Styled Components（模块化场景） #

如果你的项目使用CSS Modules，直接在模块文件里编写后代选择器：

/* styles.module.css */
.customTelInput .intl-tel-input .form-control {
  /* 自定义样式 */
}

然后在组件中引入使用：

import styles from './styles.module.css';

<IntlTelInput
  containerClassName={styles.customTelInput}
/>

若使用Styled Components，可以直接包裹组件并编写样式：

import styled from 'styled-components';
import IntlTelInput from 'react-intl-tel-input';

const StyledTelInput = styled(IntlTelInput)`
  .form-control {
    padding: 10px;
    border-radius: 8px;
  }
  .selected-flag {
    background: #eee;
  }
`;

// 使用定制后的组件
<StyledTelInput />

内容的提问来源于stack exchange，提问作者H.b