无法增加响应的大小(高度、宽度)-电话输入-2

Question

我试图在我的表单中使用react-phone-input-2，因为它提供了许多特性，如标志和格式编号等。

但是我无法使用我自己的css来定制输入。高度，宽度

此外，我还导入了使用material的所有其他组件所提供的由同一个包提供的资料css。

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>的道具，但看起来这也是行不通的。还有别的办法来解决这个问题吗？

Answer 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

Answer 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;
}

​

Answer 3

在定制containerClass="w-100“而不是inputClass="w-100”时，我遇到了一个问题。

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