Невозможно увеличить размер (высоту, ширину) response-phone-input-2

Question

Я пытаюсь использовать react-phone-input-2 в своей форме, так как он предоставляет множество функций, таких как флаг и форматирование, и т. Д. c ..

Но я не могу настроить ввод, используя свой собственный css. Например: высота, ширина

Также я импортировал материал 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