无法增加 react-phone-input-2 的大小（高度、宽度）答案

【问题标题】：Unable to increase size(height, width) of react-phone-input-2无法增加 react-phone-input-2 的大小（高度、宽度）
【发布时间】：2021-07-08 11:19:03
【问题描述】：

我正在尝试在我的表单中使用react-phone-input-2，因为它提供了许多功能，例如标志和格式化数字等。

但我无法使用自己的 css 自定义输入。例如：高度、宽度

我还导入了由同一个包提供的材料 css，因为我使用材料 ui 的所有其他组件。

import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/material.css';


<div>
<PhoneInput 
   country={'us'}
   value={this.props.receiverPhone}
   className={classes.phoneNumber}
   fullWidth="true"
   onChange={(phone) => this.props.changePhoneNumber(phone)}
/>
</div>

我的风格

    phoneNumber: {
      [theme.breakpoints.down('sm')]: {
        width: '95%',
      },
      [theme.breakpoints.up('md')]: {
        width: '93%',
      },
      [theme.breakpoints.up('lg')]: {
        width: '82%',
      },
      padding: '5px',
      height: '40px',
      marginTop: theme.spacing(2),
      marginRight: theme.spacing(1),
      marginBottom: theme.spacing(3),
    },

我也尝试将style={{width:100, height:40}} 和InputProps{{className:classes.phoneNumber}}作为道具提供给<PhoneInput>，但看起来即使这样也行不通。有没有其他方法可以解决这个问题？

【问题讨论】：

标签： css reactjs redux material-ui

【解决方案1】：

可能会有所帮助

 <PhoneInput
      inputStyle={{color:'green'}}
      containerStyle={{margin:'20px'}}
      buttonStyle={{}}
      dropdownStyle={{height:'50px'}}
      country={"us"}
      value="1425652"
      onChange={phone => console.log({ phone })}
      />

或者

  <PhoneInput
  containerClass='.....' //css class name
  inputClass='.....'
  buttonClass='.....'
  dropdownClass='.....'
  searchClass='.....'
  country={"us"}
  value="1425652"
  onChange={phone => console.log({ phone })}
  />

或者

.form-control {
  background-color: rgb(253, 214, 214) !important;
  color: rgb(104, 7, 60);
  height: 55px !important;
  width: 300px !important;
}
.react-tel-input {
  margin-top: 10px !important;
  margin-left: 10px !important;
}

.flag-dropdown {
  background-color: rgb(240, 205, 159) !important;
}

codeSandbox

【讨论】：

【解决方案2】：

这就是我实现它的方式：

.react-tel-input {
	font-size: 0.9rem !important;
}

.react-tel-input .form-control {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	height: 3.5rem !important;
	position: relative;
	letter-spacing: .01rem;
	border-radius: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	width: 100% !important;
	font-size: 0.9rem !important;
}

【讨论】：

【解决方案3】：

我在自定义 containerClass="w-100" 而不是 inputClass="w-100" 时遇到问题

当我只做容器类时，电话输入只显示大约 70% 的宽度。因此，请确保您自定义了 PhoneInput 的 inputClass 属性，希望这会有所帮助

【讨论】：