use along with materializecss about react-inputs-validation HOT 10 CLOSED

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.

from react-inputs-validation.

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

from react-inputs-validation.

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?

from react-inputs-validation.

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);
}

from react-inputs-validation.

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.

from react-inputs-validation.

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!

from react-inputs-validation.

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

from react-inputs-validation.

@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

from react-inputs-validation.

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

from react-inputs-validation.

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

from react-inputs-validation.