[FIXED] How to change the font and border color of the Button Component in MD Bootsrap React

Issue

So I'm using a button component from MDBootrap. To be specific I'm using an Outline Button Component which looks like this:

The code that's given on the website for this particular component is as follows:

<button type="button" class="btn btn-outline-warning">Warning</button>

I was wondering if there's a way around to change the font color as well as the border color of this button component since at the moment it's not matching well with the theme of my website. Thanks!

Solution

If you want to reuse styles, create a new css class:

.btn.my-cusomized-button {
    border-color: pink;
    color: pink;
    background-color: transparent;
    border: 1px solid pink;
}

<button
  type="button"
  class="btn my-cusomized-button"
>
  Primary
</button>

n.b. css class my-cusomized-button and pink as color are just an example. Use your colors and class which better suits your need

Answered By - Danko

Answer Checked By - Clifford M. (PHPFixing Volunteer)