Topic: _form-control.scss as a default background to transparent, impossible to override with $input-bg

Kaherdino priority asked 2 years ago

Expected behavior I want to be able to setup a new variable in custom_var.scss : $input-bg: "#fafafa"

Then, all my input background should be #fafafa

Actual behavior Actually, there is a .form-control {background:transparent) that's defined in _scss/free/forms/_form-control.scss

Therefore, $input-bg is not workingsee screenshot

Resources (screenshots, code snippets etc.) Is it normal ? CAn you fix it ?

Krzysztof Wilk staff commented 2 years ago


Which SCSS compiler do you use? Is that problem occurs with basic CSS styles?

Keep coding!

Kaherdino priority answered 2 years ago

I didn't use basic css style so I don't know. I'm using next.js with sass compiler (1.34.1) and I'm importing into my globals.scss

@import './custom_var';

@import "../node_modules/mdb-react-ui-kit/dist/scss/";

.form-control { background: $input-bg!important; &:not(.placeholder-active)::placeholder { opacity: 1!important; } }

Should I change something ?

Krzysztof Wilk staff commented 2 years ago

Could you deploy your project on MDB Go or share your project with me (GitHub, e-mail)? Or create a simple sample project that illustrates this problem with configuration from base one?

Kaherdino priority commented 2 years ago

Yes, please send me your email and I can invite you to my git repo. Also, do you have a guide how to integrate and customize sass ?

For me, the problem is with free/forms/_form-control.scss line 60. Why there is a background:transparent ?

Krzysztof Wilk staff commented 2 years ago

My email address is You can add me :)

We had a customization guide for MDB4 React ( you can check it), not yet for MDB5

Keep coding!

Kaherdino priority commented 2 years ago

IN fact, the problem is that by default, MDB5 is adding .form-outline to all input : "Both elements are wrapped in .form-outline class which provides a material design look."

Is there a way to not add this ? In MD4, outline is an option...

Should I use MD4 ?

Krzysztof Wilk staff commented 2 years ago

It's not recommended, but you can try to change our styles in the node_modules/mdb-react-ui-kit/dist catalog. Otherwise, I think you should use MDB4.

Keep coding!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No