_form-control.scss as a default background to transparent, i


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

Kaherdino pro premium priority asked 3 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 3 years ago

Hi!

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

Keep coding!


Kaherdino pro premium priority answered 3 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 mdb.pro.scss into my globals.scss

@import './custom_var';

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

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

Should I change something ?


Krzysztof Wilk staff commented 3 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 pro premium priority commented 3 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 3 years ago

My email address is xedanion16@gmail.com. You can add me :)

We had a customization guide for MDB4 React (https://mdbootstrap.com/docs/react/getting-started/installation/#sass you can check it), not yet for MDB5

Keep coding!


Kaherdino pro premium priority commented 3 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 3 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • 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
Tags