use along with materializecss

[kiano0sh]

Hi, thanks for the great job
i used this module in my project but now i need to use it along with mterializecss but there are lots of problem in doing it for example:
when something is wrong in materializecss inputs, a red line appears in the bottom of that input field but with using Textbox or Textarea of react-inputs-validation there wouldn't be such a thing or another problem that happened for me is using meterializecss icon along with inputs this is a common way to define inputs like this:

<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>

but if i use this with this module the CSS of input field would badly break up.
is there any possible solution for using these together ?!

[edwardfxiao]

Check this out https://codesandbox.io/s/846nqnp6j0

The key is to change css.

.react-inputs-validation__textbox__input___20hDL.react-inputs-validation__error___2aXSp {
  border: none !important;
  border-bottom: 1px solid #f44336 !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: rgb(244, 67, 54) !important;
  -webkit-box-shadow: 0 1px 0 0 #f44336 !important;
  box-shadow: 0 1px 0 0 #f44336 !important;
}

As for Icon issue, I don't really know what problem it is.

[kiano0sh]

thanks for answer but i think i have a better solution for the problem with red line and text massage color here is my sample code: https://codesandbox.io/s/zkk8wxn2z4
but there are two problem right now:

1. the label text color which probably should get fix by working on this CSS:

/* label focus color */
.input-field input[type=text].react-inputs-validation__error___2aXSp:focus + label {
    color: #F44336 !important;
}

2. the icon problem as you can see in my sample code.

[edwardfxiao]

for problem two, customStyleInput={{paddingLeft: '30px'}}should fix

[edwardfxiao]

But I don't understand what you mean for the first problem.

"1. the label text color which probably should get fix by working on this CSS:" means its solved?

[kiano0sh]

for better understanding of icon problem please go to the Icon Prefixes part of this link: https://materializecss.com/text-inputs.html
no it means the CSS is not perfect but the solution should be something like that!

[edwardfxiao]

Ok I see, but I think the only way to fix this is to config yourself, give it classNameWrapper="react-inputs-validation-validate"

and

.react-inputs-validation-validate {
  margin-left: 3rem;
  width: 92%;
  width: calc(100% - 3rem);
}

[kiano0sh]

@edwardfhsiao Alright that's nice thanks for help.
if anyone was facing this problem: https://codesandbox.io/s/zkk8wxn2z4

[edwardfxiao]

@kiano0sh I updated the version 2.1.7 and check this agian https://codesandbox.io/s/846nqnp6j0.
its a rough idea of how to implement the label thing

[kiano0sh]

@edwardfhsiao Good job but there should be an easier way to do this if i found any i will inform you.

[edwardfxiao]

I am closing this issue now as the structure of this library is not designed to be compatible with material design components specifically.