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

Question

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

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

此外，我导入了与使用材料 ui 的所有其他组件相同的包提供的材料 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;
}

代码沙盒