change color of MDBNavLink

Hi @Jasoniyi,

If you want to change the color of NavLink you need to use a className. You can read more about it HERE.

Unfornutaly we didn't have a prop to change the color of an active element. You need to wrote your custom CSS style to change it.

From MDB 4.22.0 version you can use MDBNavLink as a NavLink from react-router-dom or as a normal Link from react-router-dom by using a link props.

I wrote a simple snippet to show you how to change the color of MDBNavLink with NavLink's and Link's and how to use NavLink and Link.

import React, { Component } from 'react';
import { MDBContainer, MDBRow, MDBCol, MDBNavLink } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class NavLinkEg extends Component {
  render() {
    return (
      <Router>
        <MDBContainer>
          <MDBRow>
            <MDBCol>
              <MDBNavLink to='#' className='red-text'>
                NavLink color: className='red-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='pink-text'>
                NavLink color: className='pink-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='purple-text'>
                NavLink color: className='purple-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='deep-purple-text'>
                NavLink color: className='deep-purple-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='indigo-text'>
                NavLink color: className='indigo-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='blue-text'>
                NavLink color: className='blue-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='light-blue-text'>
                NavLink color: className='light-blue-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='cyan-text'>
                NavLink color: className='cyan-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='teal-text'>
                NavLink color: className='teal-text'
              </MDBNavLink>
              <MDBNavLink to='#' className='green-text'>
                NavLink color: className='green-text'
              </MDBNavLink>
            </MDBCol>
            <MDBCol>
              <MDBNavLink link to='#' className='light-green-text'>
                Link color: className='light-green-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='lime-text'>
                Link color: className='lime-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='yellow-text'>
                Link color: className='yellow-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='amber-text'>
                Link color: className='amber-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='orange-text'>
                Link color: className='orange-text''
              </MDBNavLink>
              <MDBNavLink link to='#' className='deep-orange-text'>
                Link color: className='deep-orange-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='brown-text'>
                Link color: className='brown-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='grey-text'>
                Link color: className='grey-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='blue-grey-text'>
                Link color: className='blue-grey-text'
              </MDBNavLink>
              <MDBNavLink link to='#' className='mdb-color white-text'>
                Link color: className='mdb-color white-text'
              </MDBNavLink>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
      </Router>
    );
  }
}

export default NavLinkEg;

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.

Best Regards,

Kuba