Custom SCSS (colors, typo, etc.)

Topic: Custom SCSS (colors, typo, etc.)

paige free asked 6 years ago

Hi, I know this has been asked on here many times, but I also don't think it's been answered fully, or correctly. I'm using the React version of MDB, which for the most part is working fantastically, but I can't get access to any custom colors. I've tried so many things trying to override or add custom colors, but nothing is successful. I feel like there has to be a way to do this besides manipulating the source code, but I haven't figured it out yet. Please help me out on this. Your recent updates have been great as far as fixing other issues, but in my opinion, the customization of colors is entirely too complicated. It should either be simple to complete or it should have better instructions on how to accomplish this. We're banging our heads against the wall over here, please help! React 16.2.0 ReactDOM 16.2.0 MdbReact 4.2.0 On a positive note: The recent updates are great! Things seem to be working well, and we look forward to watching you guys grow and improve! Thanks for all your hard work! Evan

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

Hi there, If I understand correctly, following the above instructions - writing onto _custom.scss (step 1.) and compiling it with npm run sass-compile (step 2.) actually worked. I'm happy it helped! With Best Regards, Kuba

paige free commented 6 years ago

It partially worked! I can't overwrite any of the colors, but I can create new classes and use them without any problems. Still, changing the values of the colors which are already defined is not working! This solution will work for now, but we're hoping for a better solution in the future! Thanks, Kuba.

Jakub Strebeyko staff commented 6 years ago

I totally get what you mean, feature request has been submitted. Cheers!

Add comment

paige free answered 6 years ago

0 0 Best answer

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:
<pre>.blue-btn { background-color: blue !important; }</pre>
when I run...
<pre>npm run sass-compile</pre>
, 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!

Please insert min. 20 characters.

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!

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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 <code>mdbreact</code> as a dependency, installed them all and want to change some SCSS, just do the following:
<ol>
<li> enter the <code>mdbreact</code> scss directory: <code>cd node_modules/mdbreact/dist/scss</code> (depending on your operating system and currently viewed directory method of following the path may vary). Overwrite colors, classes etc. in <code>scss/_custom.scss.</code></li>
<li> in <code>node_modules/mdbreact</code> run <code>yarn</code> / <code>npm i</code> and then <code>yarn sass-compile</code> / <code>npm run sass-compile</code>. It will enrich <code>node_modules/mdbreact/dist/css/mdb.css</code> with your custom styles!</li>
<li> make sure that up in your project directory you <code>import 'mdbreact/dist/css/mdb.css';</code> into your <code>src/index.js</code> file (part of step 5 in our <a href="https://mdbootstrap.com/react/react-bootstrap-getting-started/">Getting Started Guide</a>, for the reference)</li>
</ol>
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

Please insert min. 20 characters.

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:

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.
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!
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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

paige

12Support score
2Questions 1Answers 0Snippets