Dropdown and flags menu style error

[Stefifox]

Using this component I'm noticing a problem with style, there is some code or import to fix this?

My import:

import ReactPhoneInput from 'react-phone-input-material-ui';
import 'react-phone-input-material-ui/lib/style.css';

My Code:

<ReactPhoneInput
    name={name}
    disabled={!isEdit}
    value={value}
    component={TextField}
    country="it"
    inputProps={{ variant: 'filled', label, required }}
    fullWidth
    onChange={val => setValue(val)}
    onBlur={onBlur}
    // onKeyDown={e => e.key === 'Enter' && onBlur(e)}
    defaultErrorMessage={!!errorMessage && !isPristine}
    helperText={errorMessage && !isPristine ? errorMessage : null}
/>

[harish-everest]

You can try importing 'react-phone-input-material-ui/lib/plain.css' and if this fixes the styles. Else I will work on it or you can open a PR for a fix.

[Stefifox]

I've tried to import your style but this is the result

[harish-everest]

Hi @Stefifox

You can use import 'react-phone-input-material-ui/lib/style.css';. Let me know if you still face styling issues.

[Stefifox]

Hi

After updating your library to 2.17.3 and importing css I still have the same problem.

without CSS

with CSS

[harish-everest]

@Stefifox I'm unable to replicate the styling issue. I tried with the same code as yours. Please provide a codesandbox demo so that I can debug this.

This is how it is looking for me.

[harish-everest]

Hi, @Stefifox closing this issue as we don't have any response on this.