Open andrwo opened 2 years ago
@andrwo Do share what your code looks like. It helps clear some uncertainties moving along.
<FormControl>
wraps <IntlTelInput>
)?Disclaimer: I don't use Material UI at work, but I did try it out of curiosity.
You have to write some logic yourself.
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.
Thanks, @andrewsantarin for the detailed answer!
I very much appreciate it. It looks like I can adapt it for my usage.
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).
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!