Custom form element display none issue

Hello, We are using pro version of MDBootstrap for Angular. But today, we face to faced with a css problem. The problem is that,

*Expected behavior*In our Angular project, we are rendering some custom form elements and divs from pure javascript to the page which is containing stylesheet of mdbootstrap. Everything is okey and working perfectly except MDBootstrap scss issue.

*Actual behavior*When I include

node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss

to my project it is overriding something else and my form fields, visibility of my div is changing. When I remove this scss file everything is working perfectly except mdbootstrap components. As you can see in screenshots it is giving "opacity: 0" attribute to checkbox. Also it is giving "display: none" for select. I tried it with versions "7.4.0", "7.5.0", "7.5.4" but nothing changed.

Resources (screenshots, code snippets etc.)

Without this scss file

With mdb.scss file

With mdb.scss file 2

Edit:

My styles.scss is empty

and my angular.json file is like that:

node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss node_modules/@fortawesome/fontawesome-free/scss/solid.scss, node_modules/@fortawesome/fontawesome-free/scss/regular.scss node_modules/@fortawesome/fontawesome-free/scss/brands.scss node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss src/styles.scss