Hi community, my name is Niklas and im struggling with changing the Border of inputs in MDBootstrap react. What I mean is the blue generated Border around the input that is interrupted on the top left corner where the titel of the input stands.

I know how to change those borders in plain html & css with the following css code:

.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control.focused ~ .form-notch .form-notch-leading {
    border-top: 0.125rem solid #45a29e;
    border-bottom: 0.125rem solid #45a29e;
    border-left: 0.125rem solid #45a29e;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control.focused ~ .form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #45a29e;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing {
    border-color: currentcolor currentcolor currentcolor #45a29e;
    border-bottom: 0.125rem solid #45a29e;
    border-right: 0.125rem solid #45a29e;
    border-top: 0.125rem solid #45a29e;
}

This is what the result looks like:

My Problem is, that I use react (specially next.js) and there i have kind of a global css file where I can post that code but its not working. The MDBInput from mdb-react is not using that css. I can't create a custom class and give that class to the MDInput cause its not defining the Border, its defining the input itself.

Do you have any ideas how to manage that?

Thank you for response, best regards, Niklas