Topic: cannot override btn-primary colors

MaximeGheraille free asked 3 years ago

Expected behavior

When using npm run build or npm run start it does never change.

I want to be able to change the color via my custom class, like this:

   <MDBBtn rounded size="sm" onClick={() => CreateActualite()} className="background-color-blue">Cree</MDBBtn>

my scss file

$blue: #2d2180!important;

  background-color: $blue;

Actual behavior

I still get the standard color from bootstrap for the .btn-primary when inspecting in chrome dev

.btn-primary {
    color: #fff;
    background-color: #4285f4 !important;

this is what it gives (which is the wrong color)

enter image description here

Piotr Glejzer staff commented 3 years ago

this is a bug. I checked it and there is a problem with that. Did you try inline styling?

MaximeGheraille free commented 3 years ago

yes and it does not work because the bootstrap css overrides it and with inline styling I cannot add the ' !important' to override the bootstrap css

Piotr Glejzer staff commented 3 years ago

Yes, I know about that.

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: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.27.0
  • Device: PC
  • Browser: chrome
  • OS: windows
  • Provided sample code: Yes
  • Provided link: No