Whenever I try to use something more than just base inputs together I encounter the same problem - any other input components created with their own margins, paddings, font-sizes, their label behavior is different.

One example:

<div class="col-xs-12 col-md-4">
<div class="md-form">
<i class="fa fa-search prefix"></i>
<input mdbActive type="text" class="form-control" id="form00" name="search">
<label class="active" for="form00">Search smth</label>
</div>
</div>
<div class="col-xs-12 col-md-4">
<mdb-select [options]="sortOrders" placeholder="Sort by"></mdb-select>
<label>Sort by</label>
</div>

Input and selection have different heights, font size and label behavior. Their bottom lines are placed on different heights. Firstly I suggested that may be I need to use "form-sm" for input. No, they again are different. File input is also different. Textarea labels/selecton behavior differs from input behavior. I have to look for workarounds, insert ":host" css hooks whenever I try to bring something to common style.
Also why is this question asking functional is so bad? I can't correctly put formatted code, can't correctly receive code in answer, can't add example image. I can't correctly update the question because on updating the system doesn't understand that mdb version can be "5.1.2" and not a number? Just asking a question leads to the problem that you have to take the code, format it to understand, run somewhere to see result, then write your solution. If it has some code I have to fix inserting errors in it, format and only then understand and see what id does.