Topic: _form-control.scss as a default background to transparent, impossible to override with $input-bg
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 working
Resources (screenshots, code snippets etc.) Is it normal ? CAn you fix it ?
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 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 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 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!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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
Krzysztof Wilk staff commented 2 years ago
Hi!
Which SCSS compiler do you use? Is that problem occurs with basic CSS styles?
Keep coding!