Custom SCSS (colors, typo, etc.)

Hi there Evan,

Thanks for reaching out and the kind words! When it comes to SCSS compilation you are right, it's not that straight forward, but that's the price for predictable rendering and ease of use. Anyway, if you have added mdbreact as a dependency, installed them all and want to change some SCSS, just do the following:

1. enter the mdbreact scss directory: cd node_modules/mdbreact/dist/scss (depending on your operating system and currently viewed directory method of following the path may vary). Overwrite colors, classes etc. in scss/_custom.scss.
2. in node_modules/mdbreact run yarn / npm i and then yarn sass-compile / npm run sass-compile. It will enrich node_modules/mdbreact/dist/css/mdb.css with your custom styles!
3. make sure that up in your project directory you import 'mdbreact/dist/css/mdb.css'; into your src/index.js file (part of step 5 in our Getting Started Guide, for the reference)

If the introduced changes are not temporary (and therefore you might want to keep them), we encourage saving the overwritten classes and properties separately, in case of an update. Let me know whether it helped!

With Best Regards,
Kuba

Kuba,

Thanks for your well thought out response. Unfortunately, this did not work for me. I was hopeful that if I followed your instructions it would be enough to take care of my issues, but no matter how I tried to override the colors, it seemed to have no effect. My solution, for now, is to add classes to the _custom.scss file.

example:

.blue-btn { background-color: blue !important; }

when I run...

npm run sass-compile

, it successfully appends my new classes to the mdb.css file. I can use them as expected, and they don't seem to be conflicting with any of the other styles. This is working for now, but my team and I realize it's not an optimal solution. This is working for us now, but we're really hoping in the future we will just be able to override the variable names with ease. Hopefully, this will help someone else out who is having the same problem, or maybe someone who sees it will have a better solution that maybe I'm overlooking!