Using with Material UI

[andrwo]

Hi, I am trying to use this in Material UI.

Anyone here know how I can configure it so that it looks like the rest of the material UI TextField? Please help point the way.

Thanks in advance!

[andrewsantarin]

@andrwo Do share what your code looks like. It helps clear some uncertainties moving along.

1. What versions of Material UI and React Intl Tel Input did you try?
2. Do you use any wrappers to make things happen (e.g. <FormControl> wraps <IntlTelInput>)?
3. Have you read the inner workings of both Material UI and React Intl Tel Input?

Disclaimer: I don't use Material UI at work, but I did try it out of curiosity.

Short answer

You have to write some logic yourself.

Long answer

See this CodeSandbox. Material UI implements a lot of logic under the hood just for the presentation, especially when some of has to be done via JS, such as focus state. This model code is just for the outline variant. If you want a solid API, you'll have to extend it some more. A HACK-y approach is necessary to get the fieldset-like effect of the outline variant label.

[andrwo]

Thanks, @andrewsantarin for the detailed answer!

I very much appreciate it. It looks like I can adapt it for my usage.

[andrwo]

Just to update this track, I found a way to make it work nicely without hacking the CSS, but it involves modifying the underlying code in IntlTelInput.js.

Currently, the code is fixed to render the component using a <div> wrapper around the <FlagDropDown> component and an standard <input> component. I've made a PR (#395) to allow users to override and customize using their own rendering function. This allows the user to take control of the rendering to suit their own usage.

I have also shown in the PR how it can be adapted for use with Material UI and Reactstrap in the PR, both which I have tested.

I hope the group admins can help guide the way on how I can get the PR approved as I do feel this will be a very useful addition to the library (this is also my first time submitting a PR).